:root {
  --ink: #263e34;
  --muted: #626d5c;
  --cream: #f0ebdc;
  --paper: #f5f1e7;
  --line: #dedbcb;
  --gold: #d9b978;
  --green: #416955;
  --glass: var(--ui-win);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* The Grove interface system (RS3's window language, cosy): deep slate-green windows, a thin bronze trim with a soft
     inner highlight, gold titles, dark inset slots. Every window, cell, row and button takes these tokens; the
     component classes (.win-*, .slot, .seg, .scroll-y) are at the end of this file. */
  --ui-win: rgba(23, 33, 29, 0.95);
  --ui-win-solid: #17211d;
  --ui-bar: linear-gradient(180deg, rgba(255, 236, 190, 0.05), rgba(255, 236, 190, 0) 70%);
  --ui-cell: rgba(0, 0, 0, 0.26);
  --ui-cell-raised: rgba(255, 255, 255, 0.05);
  --ui-cell-hover: rgba(255, 236, 190, 0.1);
  --ui-cell-on: rgba(217, 185, 120, 0.2);
  --ui-line: rgba(235, 225, 190, 0.13);
  --ui-slot-line: rgba(217, 185, 120, 0.14);
  --ui-trim: #7a5c33;
  --ui-trim-hi: #c9a265;
  --ui-trim-lo: #3a2c19;
  --ui-frame: inset 0 1px 0 rgba(255, 230, 180, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 18px 48px rgba(6, 14, 11, 0.5);
  --ui-text: #efe8d6;
  --ui-muted: #aeb6a2;
  --ui-title: #e8c77d;
  --ui-accent: #d9b978;
  --ui-select: #f1d99b;
  /* Something live or celebrated: an event under way, a 99 (the dot, the edge; its text takes --ui-select). */
  --ui-glow: #ffd25a;
  --ui-on-accent: #1e2a22;
  --ui-good: #8fcf72;
  --ui-warn: #e0a84a;
  --ui-bad: #e58a74;
  --ui-danger: #c8463e;
  --ui-xp: #d9b978;
  /* RS3 stack counts: yellow under 100,000, white K, green M. */
  --ui-stack: #ffff00;
  --ui-stack-k: #ffffff;
  --ui-stack-m: #00ff80;
  --ui-radius: 6px;
  --ui-radius-win: 10px;
  --ui-slot: 44px;
  --ui-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* One window size for every interface tab: the backpack's 4 x 7 grid, its header and footer. */
  --iface-w: 272px;
  --iface-h-phone: 456px;
  /* The layer ladder: world labels < HUD < docked cards < the service window < cards over it < prompts < toasts <
     full-screen seats < the click mark < the option menu and tips < fatal. A new surface takes a rung, not a number. */
  --z-world-ui: 1;
  --z-hud-low: 3;
  --z-hud: 4;
  --z-stick: 5;
  --z-dialogue: 6;
  --z-card: 8;
  --z-scrim: 9;
  --z-window: 10;
  --z-window-2: 11;
  --z-window-3: 12;
  --z-sheet: 14;
  --z-prompt: 20;
  --z-toast: 22;
  --z-seat: 26;
  --z-seat-chat: 27;
  --z-fullscreen: 30;
  --z-drag: 35;
  --z-mark: 40;
  --z-veil: 50;
  --z-popup: 60;
  --z-tip: 61;
  --z-fatal: 70;
  --z-build: 71;
  /* The game is dark: native controls (popups, checkboxes, sliders, scrollbars) draw in the dark scheme. */
  color-scheme: dark;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--ink);
  font-synthesis: none;
}
/* One dark rule for every native control: select popups stay opaque dark with readable text, fields keep the theme,
   autofill never flashes a light box, and appearance:none switches still show state in forced colours. */
:is(select, option, optgroup) {
  background-color: var(--ui-win-solid, #17211d);
  color: var(--ui-text);
}
input::placeholder,
textarea::placeholder {
  color: var(--ui-muted);
  opacity: 1;
}
:is(button, input, select, textarea, [role="tab"]):focus-visible {
  outline: 2px solid var(--ui-select);
  outline-offset: 2px;
}
:is(input, select, textarea, button):disabled {
  opacity: 0.55;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:autofill {
  -webkit-text-fill-color: var(--ui-text);
  caret-color: var(--ui-text);
  box-shadow: 0 0 0 60px #2b2417 inset;
  border-color: var(--ui-trim);
}
#panel .setting input[type="range"]::-moz-range-track {
  background: rgba(0, 0, 0, 0.45);
}
#panel .setting input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(0, 0, 0, 0.45);
}
@media (forced-colors: active) {
  /* The settings switches show state only through backgrounds: give them a real edge, and mark "on" plainly. */
  #panel .setting input[type="checkbox"] {
    border: 1px solid ButtonText;
  }
  #panel .setting input[type="checkbox"]:checked {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
  background: #809b89;
  touch-action: none;
}
button,
input,
select {
  font: inherit;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
button:disabled {
  opacity: 0.4;
}
button,
svg {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  border: 0;
  transition:
    background 0.16s,
    filter 0.16s;
}
button:active:not(:disabled) {
  filter: brightness(0.92);
}
[hidden] {
  display: none !important;
}
svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}
#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(26, 47, 39, 0.2),
    transparent 23%,
    transparent 70%,
    rgba(25, 44, 35, 0.24)
  );
}
#labels,
#floats {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.glass {
  background: var(--glass);
  border: 1px solid rgba(235, 235, 208, 0.17);
  box-shadow: 0 6px 22px #1323191a;
  backdrop-filter: blur(14px);
  color: var(--cream);
}
#header {
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  left: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
  color: #f5f0dd;
  text-shadow: 0 1px 12px #19342566;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand h1 {
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 4.5px;
  margin: 0 0 5px;
}
.brand small {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2.5px;
  opacity: 0.78;
}
.brand-mark {
  display: block;
  width: 42px;
  height: 48px;
  color: #f5ebcf;
}
.brand-mark svg {
  height: 100%;
  width: 100%;
  stroke-width: 1.1;
}
#clock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  padding: 10px 18px;
  font-size: 10px;
  letter-spacing: 1.4px;
  white-space: nowrap;
}
#clock svg {
  width: 17px;
  height: 17px;
  color: var(--gold);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
#connection {
  border-radius: 30px;
  display: flex;
  align-items: center;
}
#connection:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbb97f;
}
#connection.shared:before {
  background: #a7cd9d;
}
#connection.offline:before {
  background: #d19379;
}
#place {
  position: fixed;
  top: 119px;
  left: 36px;
  color: #fff6dc;
  display: flex;
  gap: 13px;
  align-items: center;
  pointer-events: none;
  text-shadow: 0 2px 16px #14332277;
}
#place h2 {
  font-family: Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  margin: 5px 0;
}
#xp-tracker {
  position: fixed;
  top: 186px;
  left: 30px;
  width: 200px;
  border-radius: 10px;
  padding: 9px 12px 8px;
  pointer-events: none;
  color: #f4ebd2;
}
#xp-tracker .row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
#xp-tracker .bar {
  border-radius: 2px;
  overflow: hidden;
}
#xp-tracker .bar i {
  display: block;
  height: 100%;
}
#xp-tracker small {
  font-size: 8px;
}
#saved {
  position: fixed;
  right: 38px;
  top: 84px;
  color: #f4ebd2;
  font-size: 10px;
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 0.6s;
}
.eyebrow {
  font-size: 9px;
  letter-spacing: 1.8px;
  font-weight: 600;
  color: var(--muted);
}
#quest .eyebrow {
  color: #c7d0bc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#quest h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  margin: 11px 0 8px;
}
#quest button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  color: var(--gold);
  padding: 0;
  font-size: 11px;
  text-align: left;
  min-height: 30px;
}
.quest-dots {
  display: flex;
  gap: 5px;
  margin-top: 13px;
}
.quest-dots i {
  width: 23px;
  height: 2px;
  background: #a3b19b33;
}
.quest-dots i.done {
  background: var(--gold);
}
#context {
  position: fixed;
  padding: 17px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c6d1b955 transparent;
}
#context .eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
}
#context .eyebrow svg,
#context p > svg {
  height: 13px;
  width: 13px;
}
#context p > svg {
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--ui-accent, var(--gold));
}
#context h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 21px;
}
#context p {
  font-size: 10px;
  line-height: 1.6;
  margin: 0 0 12px;
}
#context button {
  width: 100%;
  min-height: 42px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
}
#context button.secondary {
  margin-top: 7px;
}
#context .progress {
  height: 3px;
  background: #b7c3aa33;
  margin: 10px 0 8px;
  border-radius: 2px;
}
#context .progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
}
#context .small-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
}
#rest-banner {
  position: fixed;
  top: 105px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 12px;
  padding: 13px 17px;
  z-index: 2;
  display: flex;
  gap: 16px;
  align-items: center;
}
#rest-banner strong {
  color: var(--gold);
}
#rest-banner button {
  background: var(--gold);
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 11px;
  white-space: nowrap;
}
#duel-hud {
  position: fixed;
  top: 104px;
  left: 50%;
  transform: translateX(-50%);
  padding: 13px 20px;
  border-radius: 12px;
  min-width: 260px;
  text-align: center;
}
#duel-hud .score {
  font-family: Georgia, serif;
  font-size: 22px;
  margin: 6px;
}
#duel-hud small {
  font-size: 9px;
  letter-spacing: 1.1px;
  color: var(--gold);
}
.world-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  border: 0;
  color: #f4efdc;
  background: #334c3bd9;
  padding: 5px 9px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px #192a2422;
  pointer-events: auto;
  max-width: 185px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.world-label.service:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 5px;
  height: 5px;
  background: #334c3bd9;
  transform: rotate(45deg);
}
.world-label.resource,
.world-label.place {
  background: #f0e6ccee;
  color: #47563d;
  border: 1px solid #e8ddb89c;
  font-size: 8px;
  letter-spacing: 0.5px;
  padding: 5px 8px;
}
.world-label.npc,
.world-label.resident {
  background: transparent;
  font-weight: 500;
  box-shadow: none;
  color: #fffae7;
  text-shadow: 0 1px 4px #143626;
  font-size: 9px;
  letter-spacing: 0.4px;
  padding: 2px;
}
.world-label.npc small,
.world-label.resident small {
  font-size: 7px;
  color: #e0dfbb;
  display: block;
  margin-top: 3px;
  letter-spacing: 1px;
}
.world-label.monster {
  letter-spacing: 0.4px;
}
.floating {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  color: #fff3c4;
  font-weight: 600;
  font-size: 12px;
  text-shadow: 0 2px 5px #233a26;
  animation: float-up 1.6s ease-out forwards;
}
@keyframes float-up {
  0% {
    opacity: 0;
    translate: 0 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: 0 -65px;
  }
}
/* Combat impacts are compact badges; the label frame keeps them clear of the HUD and attached to their target. */
.hitsplat {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 58px;
  height: 32px;
  padding: 0 9px;
  box-sizing: border-box;
  border: 1px solid #f7c0a1;
  border-radius: 10px 4px 10px 4px;
  background: linear-gradient(160deg, #994f3c, #56271f);
  box-shadow: 0 2px 0 #190e0bd9, 0 3px 9px #0008, inset 0 1px #fff2;
  color: #fff7e9;
  font: 800 20px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform, opacity;
}
.hitsplat[hidden] { display: none; }
.hitsplat .hitsplat-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.hitsplat.taken { background: linear-gradient(160deg, #b23c40, #641d29); border-color: #ffc1bd; }
.hitsplat.ally { background: linear-gradient(160deg, #536a7c, #293d50); border-color: #bed1dc; }
.hitsplat:is(.miss, .block, .dodge) {
  min-width: 88px;
  background: linear-gradient(160deg, #385569, #1c303e);
  border-color: #b4cfda;
  color: #edf6fc;
  font-size: 13px;
  letter-spacing: .6px;
}
.hitsplat.critical { background: linear-gradient(160deg, #966824, #574015); border-color: #ffdd81; color: #ffe7a2; }
.hitsplat.critical small { font: 800 8px/1 system-ui, sans-serif; letter-spacing: .3px; align-self: flex-start; margin-top: 6px; }
.hitsplat .hitsplat-source { font: 800 9px/1 system-ui, sans-serif; letter-spacing: .3px; align-self: flex-end; margin: 0 0 5px; }
.hitsplat.heal { background: linear-gradient(160deg, #39764b, #1c432d); border-color: #a0e0a7; color: #d3ffcc; }
.reduced .hitsplat { will-change: auto; }
#scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim, 9);
  background: #0e211c3b;
  backdrop-filter: blur(2px);
}
#panel {
  position: fixed;
  z-index: var(--z-window, 10);
  top: 20px;
  right: 20px;
  width: 424px;
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
  overflow: hidden;
}
#panel-heading {
  flex-shrink: 0;
  position: relative;
}
#panel-heading .eyebrow {
  margin-bottom: 9px;
  letter-spacing: 1.9px;
}
#panel-heading h2 {
  margin: 0;
  display: flex;
  align-items: center;
}
.close-button {
  position: absolute;
  right: 16px;
  top: 15px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #5365450c;
  color: #677760;
}
.close-button svg {
  width: 17px;
  height: 17px;
}
#panel-tabs {
  flex-shrink: 0;
}
#panel-tabs[hidden] {
  display: none;
}
.fit-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 4px;
  font-size: 11px;
  color: #606c59;
}
.fit-pager button {
  min-height: 0;
  padding: 5px 14px;
}
.section-title {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 1.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3px 0 13px;
  color: #6b7764;
}
.section-title.spaced {
  margin-top: 26px;
}
.subtext {
  font-size: 11px;
  color: #7c8474;
  line-height: 1.8;
  margin: 10px 0;
}
.item-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
/* Collection and recipe tiles use the item/stat grids and the shop-style info footer. */
html body .info-grid { min-width: 0; position: relative; margin: 6px 0 8px; }
html body .info-grid > .info-grid-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 4px;
}
html body .info-grid .info-grid-cell {
  min-width: 0;
  min-height: 56px;
  padding: 4px 3px;
  background: var(--ui-cell);
  color: var(--ui-text);
  border: 1px solid var(--ui-slot-line);
  border-radius: var(--ui-radius);
  white-space: normal;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}
html body .info-grid-cell > :is(.item-thumb, .art-icon, svg) { width: 24px; height: 24px; }
html body .info-grid-cell > :is(small, b) { font: 600 10.5px/1.25 var(--ui-font); white-space: normal; }
html body .info-grid-cell.unearned > :is(.item-thumb, .art-icon, svg) { opacity: .45; filter: grayscale(1); }
html body .info-grid-cell.unearned { color: var(--ui-muted); }
html body .info-grid-cell[aria-expanded="true"] { border-color: var(--ui-accent); background: var(--ui-cell-raised); }
html body .info-grid-cell:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
html body .grid-info-card {
  position: sticky;
  bottom: 0;
  z-index: 3;
  max-height: 36dvh;
  overflow: auto;
  overscroll-behavior: contain;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-win-solid);
  box-shadow: 0 -6px 16px rgb(0 0 0 / 0.45);
  color: var(--ui-text);
  font: 400 12px/1.5 var(--ui-font);
  overflow-wrap: anywhere;
}
html body .grid-info-card[hidden] { display: none; }
html body .grid-info-card .ii-head { min-width: 0; align-items: center; padding-right: 0; }
html body .grid-info-card .ii-head > div { min-width: 0; }
html body .grid-info-card :is(h3, p) { margin: 0 0 6px; white-space: normal; }
html body .grid-info-card h3 { font: 700 14px/1.4 var(--ui-font); }
html body .grid-info-card .ii-foot { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
html body .grid-info-card button { min-height: 36px; max-width: 100%; white-space: normal; }
html body .grid-info-hint { display: none; }
@media (max-width: 700px) {
  html body .info-grid > .info-grid-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .grid-info-card button { min-height: 44px; }
}

.item {
  position: relative;
  background: #e9e7d8;
  border: 1px solid #dcdcc8;
  border-radius: 9px;
  min-height: 79px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9px 4px 6px;
  color: var(--ink);
  gap: 4px;
}
.item svg {
  width: 27px;
  height: 27px;
  stroke-width: 1.45;
}
.item .item-name {
  font-size: 8px;
  line-height: 1.3;
  text-align: center;
}
.item .item-count {
  position: absolute;
  right: 5px;
  top: 4px;
  font-size: 9px;
  min-width: 14px;
  background: #f4f0dd;
  border-radius: 3px;
}
.item.empty {
  opacity: 0.28;
  border-style: dashed;
  min-height: 74px;
  background: transparent;
}
.item.empty span {
  font-size: 18px;
  color: #8d997d;
}
.primary {
  min-height: 47px;
  border-radius: 8px;
  background: var(--green);
  color: #f5f1df;
  padding: 13px 17px;
  font-size: 12px;
  font-weight: 550;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
@media (hover: hover) {
  .primary:hover {
    background: #365944;
  }
}
.primary.gold {
  background: #d6ba7f;
  color: #334735;
}
.secondary-button {
  min-height: 42px;
  border: 1px solid #cfd2bf;
  border-radius: 7px;
  background: transparent;
  padding: 10px 13px;
  color: #56694e;
  font-size: 11px;
  width: 100%;
}
.primary + .secondary-button {
  margin-top: 8px;
}
.text-button {
  background: none;
  color: #7f886e;
  padding: 11px 0;
  text-align: center;
  font-size: 10px;
  width: 100%;
  min-height: 38px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gap {
  margin-top: 19px;
}
.inventory-footer {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}
.inventory-footer > div {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
}
.inventory-footer small {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
}
.inventory-footer strong {
  display: block;
  font:
    20px Georgia,
    serif;
  margin-top: 7px;
}
.equipment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.equipment > div,
.equipment > button {
  background: #e7e9db;
  border-radius: 8px;
  padding: 12px 10px;
  font-size: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.equipment small {
  display: block;
  font-size: 7px;
  letter-spacing: 1px;
  color: #818977;
  margin-bottom: 4px;
}
.equipment svg {
  width: 20px;
  height: 20px;
  color: #7c9169;
}
.item-detail {
  border-radius: 12px;
  padding: 20px;
  background: #e6e8d8;
  border: 1px solid #d5dac4;
  margin-bottom: 20px;
}
.item-detail h3 {
  font:
    22px Georgia,
    serif;
  margin: 10px 0 3px;
}
.item-detail > svg {
  height: 39px;
  width: 39px;
}
.item-detail p {
  font-size: 11px;
  color: #79846d;
  line-height: 1.6;
}
.recipe {
  border-bottom: 1px solid var(--line);
  padding: 15px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.recipe:first-of-type {
  padding-top: 0;
}
.recipe-icon {
  border-radius: 10px;
  background: #e5e6d6;
  width: 45px;
  height: 48px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.recipe-main {
  flex: 1;
}
.recipe h3 {
  font:
    17px Georgia,
    serif;
  margin: 0 0 7px;
}
.recipe p {
  font-size: 8px;
  line-height: 1.7;
  color: #7a846e;
  margin: 0;
}
.recipe button {
  font-size: 9px;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 6px;
  background: #446c56;
  color: #f2eedb;
}
.missing {
  color: #a37560;
}
.recipe .xp {
  font-size: 8px;
  color: #829172;
  margin-top: 5px;
}
.skill-row {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.skill-row h3 {
  font:
    19px Georgia,
    serif;
  margin: 0 0 8px;
  text-transform: capitalize;
}
.skill-row .level {
  font:
    23px Georgia,
    serif;
  color: #64815d;
}
.bar {
  height: 5px;
  background: #dbdfcc;
  border-radius: 9px;
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  background: #82956d;
}
.skill-row small {
  display: block;
  margin-top: 7px;
  color: #8b9380;
  font-size: 8px;
  letter-spacing: 0.4px;
}
.echo-row {
  background: #e9eadc;
  border: 1px solid #d9decb;
  padding: 17px;
  margin-bottom: 11px;
  border-radius: 11px;
}
.echo-row h3 {
  font:
    19px Georgia,
    serif;
  margin: 0 0 5px;
}
.echo-row .amount {
  font:
    27px Georgia,
    serif;
  color: #738764;
}
.echo-row .bar {
  margin-top: 12px;
}
.echo-row p {
  font-size: 9px;
  color: #7b866f;
  line-height: 1.7;
  margin: 7px 0 12px;
}
.echo-row button {
  font-size: 10px;
  padding: 10px 12px;
  min-height: 39px;
  border-radius: 6px;
  background: #d4dbc3;
  color: #4a6144;
  width: 100%;
  text-align: left;
}
.note {
  display: flex;
  gap: 10px;
  padding: 15px;
  border-radius: 9px;
  background: #e6eadb;
  color: #6a795e;
  font-size: 10px;
  line-height: 1.75;
  margin: 16px 0;
}
.note svg {
  width: 19px;
  height: 19px;
  margin-top: 2px;
}
.empty-state {
  text-align: center;
  padding: 27px 15px;
  color: #7e8b72;
  font-size: 12px;
  line-height: 1.8;
}
.empty-state > svg {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto 16px;
  color: #95a185;
}
.empty-state h3 {
  font:
    23px Georgia,
    serif;
  margin: 0 0 9px;
}
.pavilion-art {
  width: 100%;
  height: 144px;
  background: #e3e6d5;
  border-radius: 12px;
  display: block;
  margin-bottom: 19px;
}
.pavilion-art svg {
  height: 100%;
  width: 100%;
  stroke: none;
}
.stage-dots {
  display: flex;
  gap: 6px;
  margin: 10px 0 17px;
}
.stage-dots span {
  flex: 1;
  background: #dbe0cc;
  height: 4px;
  border-radius: 4px;
}
.stage-dots span.done {
  background: #899d70;
}
.project-title {
  font:
    23px Georgia,
    serif;
  margin: 0 0 8px;
}
.cost-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.cost-row > span:nth-child(2) {
  flex: 1;
}
.cost-row strong {
  font-weight: 500;
  color: #667b57;
}
.contributor {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  margin: 3px 0;
  color: #66795c;
}
.contributor small {
  font-size: 9px;
  color: #8a937d;
}
.vote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.vote-grid button {
  background: #e6e8d7;
  border: 1px solid #d5dcc5;
  border-radius: 7px;
  min-height: 44px;
  font-size: 9px;
  padding: 4px;
  color: #667758;
}
.vote-grid button.selected {
  background: #d1ddc0;
  border-color: #94a77e;
}
.vote-grid small {
  display: block;
  margin-top: 6px;
  opacity: 0.7;
}
.map-wrap {
  background: #dce3ce;
  border: 1px solid #cbd7bd;
  border-radius: 13px;
  overflow: hidden;
  position: relative;
}
.map-wrap canvas {
  display: block;
  width: 100%;
  height: 275px;
}
.resident {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.resident > span:first-child {
  background: #dce4cd;
  border-radius: 50%;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #789264;
}
.resident .person-info {
  flex: 1;
  font-size: 11px;
}
.resident small {
  display: block;
  font-size: 8px;
  color: #8c9782;
  margin-top: 4px;
}
.resident button {
  font-size: 9px;
  background: #e5e9d9;
  color: #6b8159;
  border-radius: 5px;
  padding: 9px;
}
.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
/* (Legacy light .setting controls lived here; the global dark native-control rule above covers them.) */
.key-note {
  font-size: 10px;
  line-height: 1.8;
  color: #8b927f;
  padding: 12px 0;
}
.danger {
  color: #a16e5a;
}
.shop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.shop-row span {
  flex: 1;
  margin-left: 10px;
}
.shop-row small {
  display: block;
  font-size: 8px;
  color: #8a9480;
  margin-top: 4px;
}
.shop-row button {
  border-radius: 6px;
  background: #dce3ce;
  padding: 10px;
  font-size: 10px;
  color: #577047;
}
.action-split {
  display: flex;
  gap: 8px;
}
.action-split > * {
  flex: 1;
}

/* Painted brand: the emblem (art/brand/emblem-*.png) stands in for the line sprout in every .brand-mark, and the
   hand-lettered wordmark (art/ui/brand/logo.png) for the "The Grove" titles; the text stays for screen readers. */
.brand-mark {
  background: url(art/brand/emblem-128.png) center / contain no-repeat;
}
.brand-mark svg {
  visibility: hidden;
}
#header .brand h1 {
  font-size: 0;
  color: transparent;
  text-shadow: none;
  background: url(art/ui/brand/logo.png) left center / contain no-repeat;
  aspect-ratio: 1024 / 384;
  width: 107px;
  height: 40px;
  margin: 0;
}
/* Toasts stack below the place block (its bottom edge is ~171px on desktop), never over the place name. */
#toasts {
  position: fixed;
  top: 184px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast, 22);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  max-width: 90vw;
  pointer-events: none;
}
.toast {
  box-shadow: 0 8px 24px #172a2720;
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
#fatal {
  position: fixed;
  inset: 20%;
  padding: 30px;
  background: var(--paper);
  z-index: var(--z-fatal, 70);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.8;
  border-radius: 12px;
}
#joystick {
  position: fixed;
  width: 110px;
  height: 110px;
  pointer-events: none;
  z-index: var(--z-stick, 5);
  transform: translate(-50%, -50%);
}
.stick-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #304b354a;
  border: 1px solid #e9efc944;
  backdrop-filter: blur(3px);
}
.stick-thumb {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e8e7d3bb;
  border: 1px solid #fff9;
  left: 34px;
  top: 34px;
  box-shadow: 0 3px 10px #21352a33;
}
.compact-label {
  font-size: 9px;
  color: #849077;
}
.return-count {
  font:
    46px Georgia,
    serif;
  color: #6a825c;
  margin: 8px 0;
}
.health-bar {
  height: 4px;
  background: #ffffff22;
  border-radius: 3px;
  margin: 8px 0;
}
.health-bar i {
  display: block;
  height: 100%;
  background: #d9a679;
  border-radius: 3px;
}
.contrast #context,
.contrast #quest {
  background: #20382af5;
}
.contrast .world-label {
  background: #193b25;
  color: #fff;
}
.reduced * {
  animation: none !important;
  transition: none !important;
}
@media (max-width: 1050px) {
  #clock {
    display: none;
  }
  #context {
    right: 20px;
    width: 210px;
  }
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #header .brand h1 {
    width: 80px;
    height: 30px;
  }
  #header {
    left: 17px;
    right: 15px;
    top: max(17px, env(safe-area-inset-top));
    gap: 6px;
  }
  .brand {
    gap: 7px;
  }
  .brand-mark {
    height: 34px;
    width: 28px;
  }
  .brand h1 {
    font-size: 18px;
    letter-spacing: 2.7px;
    margin-bottom: 4px;
  }
  .brand small {
    font-size: 5.4px;
    letter-spacing: 1.55px;
  }
  .header-actions {
    gap: 6px;
  }
  .icon-button {
    width: 35px;
    height: 35px;
  }
  .icon-button svg {
    width: 17px;
    height: 17px;
  }
  #connection {
    font-size: 6.5px;
    padding: 8px;
    letter-spacing: 0.5px;
  }
  #connection:before {
    width: 4px;
    height: 4px;
  }
  #saved {
    top: 68px;
    right: 19px;
    font-size: 8px;
  }
  #place {
    top: 91px;
    left: 19px;
    gap: 10px;
  }
  #xp-tracker {
    top: 148px;
    left: 19px;
    width: 170px;
  }
  #place small {
    font-size: 6px;
    letter-spacing: 1.3px;
  }
  #place h2 {
    font-size: 17px;
    margin: 4px 0;
  } /* Phone: the toast band sits below the place name (bottom ~137px); quest, rest and duel cards follow it down. Quest hides while resting, fighting or duelling, so the three never stack. */
  #quest h3 {
    font-size: 17px;
    margin: 8px 0 5px;
  }
  #quest .eyebrow {
    font-size: 6.5px;
    letter-spacing: 1px;
  }
  #quest button {
    font-size: 9px;
    min-height: 25px;
  }
  .quest-dots {
    margin-top: 8px;
    gap: 4px;
  }
  .quest-dots i {
    width: 19px;
  }
  #context {
    padding: 13px;
    border-radius: 11px;
    background: #233e31e8;
  }
  #context h3 {
    font-size: 18px;
    margin-top: 7px;
  }
  #context p {
    line-height: 1.5;
    margin-bottom: 10px;
  }
  #context button {
    min-height: 44px;
    font-size: 10px;
    padding: 0 10px;
  }
  #context .small-row {
    font-size: 8px;
  }
  #context .secondary {
    margin-top: 6px;
    min-height: 40px;
  }
  #rest-banner {
    top: 206px;
    padding: 12px 14px;
    font-size: 10px;
    gap: 12px;
  }
  #duel-hud {
    top: 206px;
    min-width: 240px;
  }
  #toasts {
    top: 150px;
    max-width: calc(100vw - 35px);
  }
  .toast {
    font-size: 10px;
    padding: 11px 14px;
  }
  #panel {
    left: 0;
    right: 0;
    width: 100%;
    padding-bottom: var(--safe-bottom);
    border: 0;
  }
  .floating {
    font-size: 11px;
  }
  .primary {
    min-height: 48px;
  }
  #fatal {
    inset: 15% 7%;
    padding: 25px;
    font-size: 13px;
  }
  .setting {
    padding: 16px 0;
  }
  .item {
    min-height: 82px;
  }
  .shop-row button {
    min-height: 42px;
  }
}
@media (max-height: 670px) and (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  #quest,
  #context {
    bottom: 120px;
  }
  #place {
    top: 95px;
  }
  #panel {
    top: 12px;
    bottom: 12px;
  }
}
/* Kout at the Lantern Court: the table overlay (any KoutTable view mounts in #kout-view), the Sit prompt, and the Grove UI hidden while seated. */
#kout-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-seat, 26);
  background: #1b3027;
}
#kout-view {
  position: absolute;
  inset: 0;
}
#kout-bar {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  max-width: calc(100vw - 24px);
  background: #f2eddaf2;
  color: #4c6344;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  box-shadow: 0 8px 24px #0004;
  z-index: 2;
}
#kout-bar button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 7px;
  border: 1px solid #c9c0a0;
  background: #fff8e6;
  color: #3f5538;
  font-weight: 600;
}
#kout-bar button.primary {
  background: #5d7c56;
  color: #fff;
  border-color: #5d7c56;
}
#kout-conn {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #71493dde;
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  z-index: 2;
}
#kout-sit {
  position: fixed;
  right: 30px;
  bottom: 140px;
  width: 250px;
  padding: 16px;
  border-radius: 13px;
  z-index: var(--z-card, 8);
  color: #f3ecd6;
}
#kout-sit h3 {
  font:
    20px Georgia,
    serif;
  margin: 6px 0 8px;
}
#kout-sit ul {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  font-size: 11px;
  line-height: 1.7;
}
#kout-sit li.A:before {
  content: "● ";
  color: #c07a66;
}
#kout-sit li.B:before {
  content: "● ";
  color: #7f9bb0;
}
#kout-sit p {
  font-size: 11px;
}
#kout-sit button {
  width: 100%;
  margin-top: 6px;
  min-height: 44px;
}
body.kout-open #header,
body.kout-open #place,
body.kout-open #interface,
body.kout-open #quest,
body.kout-open #context,
body.kout-open #labels,
body.kout-open #duel-hud,
body.kout-open #rest-banner,
body.kout-open #joystick,
body.kout-open #saved,
body.kout-open #xp-tracker,
body.kout-open #kout-sit {
  display: none !important;
}
.world-label.resident.kout small {
  color: #f2d58f;
}
/* Town chat: a speech button left of the toolbar opens a one-line input and a small town log; bubbles float over speakers. */
#chat {
  position: fixed;
  left: 30px;
  bottom: 30px;
  z-index: var(--z-hud, 4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}
#chat > * {
  pointer-events: auto;
}
#chat-button {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
#chat.open #chat-button {
  background: #2f4a3d;
  box-shadow: 0 0 0 2px var(--gold);
}
#chat-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px #1e332a;
}
/* The chat box, RS3-clean (features/chat.js): a row of small text tabs (the active one underlined), fold and minimise,
   then Guide at the right end; dense "Name: text" lines; one slim input line at the bottom (Enter sends). */
#chat-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#chat-log #chat-form {
  height: 30px;
  margin-top: 4px;
  padding: 0 4px 0 8px;
  border-radius: var(--ui-radius);
  background: #0000002e;
  box-shadow: inset 0 0 0 1px var(--ui-line);
}
#chat-log #chat-form[hidden] {
  display: none;
}
#chat-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text);
  font: 400 12px / 1.3 var(--ui-font);
  outline: none;
}
#chat-input::placeholder {
  color: var(--ui-muted);
}
/* On a wide screen the typing row is always in the box, so pressing Enter changes nothing but the cursor. */
#chat:not(.open) #chat-form {
  opacity: 0.6;
}
#chat-count {
  font-size: 10px;
  color: var(--ui-accent);
}
/* Enter sends; the Say button is for touch only. */
#chat-send {
  display: none;
  height: 24px;
  border-radius: 12px;
  padding: 0 12px;
  font-weight: 600;
  font-size: 12px;
  background: var(--ui-accent);
  color: #1e332a;
}
@media (hover: none) {
  #chat-send {
    display: block;
  }
}
#chat-log {
  padding: 4px 8px 6px;
  border-radius: var(--ui-radius-win);
  color: var(--ui-text);
}
#chat-log header {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--ui-line);
}
#chat-log [role="tablist"] {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  margin-right: auto;
}
#chat-log [data-chat-tab] {
  background: transparent;
  color: var(--ui-muted);
  font: 600 11px / 1 var(--ui-font);
  padding: 5px 7px;
  min-height: 24px;
  border-radius: 0;
}
#chat-log [data-chat-tab].active {
  color: var(--ui-select);
  box-shadow: inset 0 -2px 0 var(--ui-accent);
}
#chat-fold {
  background: transparent;
  color: var(--ui-accent);
  width: 22px;
  height: 24px;
  font-size: 12px;
}
#chat-log #orb-guide {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  margin-left: 4px;
  padding: 0 8px;
  border: 1px solid var(--ui-trim);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  color: var(--ui-title, var(--ui-text));
  font: 600 11px / 1 var(--ui-font);
  cursor: pointer;
}
#chat-log #orb-guide .ui-art {
  width: 14px;
  height: 14px;
}
@media (hover: hover) {
  #chat-log #orb-guide:hover {
    color: var(--ui-select);
    border-color: var(--ui-trim-hi);
  }
}
/* Emotes share the chat's scroll well; the input stays below it. */
#chat-emotes {
  max-height: min(264px, 40dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  margin-top: 6px;
}
#chat-emotes[hidden] { display: none; }
#chat-emotes .section-title {
  margin: 0 0 5px;
  font-size: 10px;
}
#chat-emotes .emote-grid {
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}
#chat-emotes .emote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 3px 2px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell-raised);
  color: var(--ui-text);
  font: 600 11px / 1.2 var(--ui-font);
  overflow-wrap: anywhere;
  text-align: center;
}
#chat-emotes .emote > :first-child { width: 24px; height: 24px; }
/* Emote tiles are icon-only; the name and unlock line live in the button's title. */
#chat-emotes .emote > span, #chat-emotes .emote small { display: none; }
#chat-emotes .emote.locked { background: var(--ui-cell); color: var(--ui-muted); }
#chat-emotes .emote.locked > :first-child { opacity: .4; filter: grayscale(1); }
#chat-emotes .emote small { font-size: 9px; font-weight: 400; }
#chat-emotes .emote small .art-icon { width: 10px; height: 10px; vertical-align: -1px; }
#chat-emotes .emote:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
@media (hover: hover) {
  #chat-emotes .emote:hover { background: var(--ui-cell-hover); border-color: var(--ui-trim-hi); }
}
#chat-lines {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  max-height: 128px;
  overflow-y: auto;
  touch-action: pan-y;
  font: 400 12px / 1.3 var(--ui-font);
  overflow-wrap: anywhere;
}
/* Open, the line well fits about fourteen lines. */
body.chat-open #chat-lines {
  max-height: min(224px, 40dvh);
}
#chat-lines li {
  padding: 2px 0;
}
#chat-lines b {
  color: #f2d58f;
  font-weight: 600;
}
#chat-lines .ch-near b {
  color: #9fd0e8;
}
#chat-lines .mine b {
  color: #bfe0c6;
}
#chat-lines .system .chat-text {
  color: var(--ui-muted);
  font-style: italic;
}
#chat-empty {
  margin: 4px 0 2px;
  font-size: 11px;
  color: var(--ui-muted);
}
#bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-world-ui, 1);
}
.chat-bubble {
  position: absolute;
  transform: translate(-50%, calc(-100% - 24px));
  max-width: min(220px, 62vw);
  width: max-content;
  background: #fbf7ea;
  color: #2c3f33;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.35;
  box-shadow: 0 3px 12px #1a302544;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chat-bubble:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #fbf7ea;
  transform: translateX(-50%) rotate(45deg);
}
#chat-person {
  position: fixed;
  right: 30px;
  bottom: 140px;
  padding: 16px;
  border-radius: 13px;
  z-index: var(--z-card, 8);
  color: #f3ecd6;
}
#chat-person h3 {
  margin: 6px 0 6px;
}
#chat-person p {
  font-size: 11px;
  line-height: 1.5;
  margin: 0 0 8px;
}
#chat-person button {
  width: 100%;
  margin-top: 6px;
  min-height: 44px;
}
body.kout-open #bubbles {
  display: none;
}
body.kout-open #chat {
  z-index: var(--z-seat-chat, 27);
  top: max(10px, env(safe-area-inset-top));
  bottom: auto;
  left: 10px;
  flex-direction: column-reverse;
  width: min(330px, calc(100vw - 150px));
}
body.kout-open #chat-lines {
  max-height: 76px;
}
body.kout-open #chat-person {
  display: none;
}
body.kout-open #chat-log [data-chat-tab] {
  font-size: 10px;
  padding: 4px 8px;
  min-height: 28px;
}
body.kout-open .tab-long {
  display: none;
}
body.kout-open #chat-log {
  padding: 6px 8px 5px;
}
#chat-person .secondary-button {
  background: transparent;
  color: #ece5cf;
  border: 1px solid #ffffff55;
  border-radius: 8px;
}
/* Tier 2: locked forge and kitchen rows are greyed with their gate ("Crafting 33"); worn armour shows its block; a resting creature's Engage counts down. */
.recipe.locked {
  opacity: 0.55;
  filter: grayscale(0.85);
}
.recipe.locked h3 {
  color: #7d8274;
}
.recipe .lock {
  color: #9a7a5e;
}
.recipe button.gate {
  background: #d9dccb;
  color: #6d7564;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.equipment em {
  font-style: normal;
  color: #829172;
  font-size: 8px;
}
.equipment > div.empty {
  opacity: 0.7;
}
#context button.resting {
  opacity: 0.75;
  cursor: default;
}
#context button.locked {
  opacity: 0.55;
}
/* The chat row spans the phone's width; only its button and form take taps, so the Engage and Strike buttons under its empty part stay reachable. */
#chat-row {
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
#chat-row > * {
  pointer-events: auto;
}
/* Welcome creator: two body tiles, Randomize, and the turntable preview in the world behind the card. */
.body-row {
  margin: 16px 0 20px;
}
.body-row > span {
  display: block;
  font-size: 8px;
  letter-spacing: 1.3px;
  color: #89937e;
  margin-bottom: 8px;
}
.body-row > div[role="group"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.body-tile {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #e6e7d6;
  border: 1px solid #d7dcc7;
  border-radius: 8px;
  color: #4e6246;
  font-size: 13px;
  letter-spacing: 0.3px;
  cursor: pointer;
  touch-action: manipulation;
}
.body-tile[aria-pressed="true"] {
  background: #dfe6cf;
  border-color: #6f8a64;
  box-shadow: inset 0 0 0 1px #6f8a64;
  color: #2f4a33;
}
.body-tile:disabled {
  opacity: 0.6;
}
.body-tile .glyph {
  display: block;
  width: 14px;
  height: 22px;
  position: relative;
}
.body-tile .glyph:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.body-tile .glyph:after {
  content: "";
  position: absolute;
  left: 1px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 3px 3px 1px 1px;
  background: currentColor;
  opacity: 0.7;
}
.body-tile .glyph.female:after {
  left: 2px;
  width: 10px;
  border-radius: 5px 5px 1px 1px;
}
.look-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.look-row[hidden] {
  display: none;
}
.look-buttons {
  display: flex;
  gap: 8px;
}
.look-roll {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: #fff9;
  border: 1px solid #cfd6bd;
  color: #4e6246;
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}
.look-roll i {
  font-style: normal;
  font-size: 17px;
  vertical-align: -2px;
  margin-right: 3px;
}
.look-row small {
  font-size: 9px;
  color: #98a08b;
}
/* Creator sheet: one compact row per part, arrows plus swatch strips. */
#creator-sheet {
  margin: 6px 0 12px;
  border-top: 1px solid #d7dcc7;
  padding-top: 10px;
  max-height: 34dvh;
  overflow-y: auto;
  scrollbar-width: thin;
}
#creator-sheet[hidden] {
  display: none;
}
.look-part {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}
.look-part[hidden] {
  display: none;
}
.look-arrow {
  flex: none;
  width: 44px;
  min-height: 44px;
  border-radius: 10px;
  background: #e6e7d6;
  border: 1px solid #d7dcc7;
  color: #4e6246;
  font-size: 20px;
  line-height: 1;
  touch-action: manipulation;
}
.look-name {
  flex: 1;
  font-size: 11px;
  color: #4e6246;
  text-align: center;
  line-height: 1.35;
}
.look-name b {
  display: block;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 14px;
  color: #344d3e;
}
.look-name i {
  font-style: normal;
  font-size: 9px;
  color: #98a08b;
}
.look-swatches {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 6px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.look-swatch {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sw);
  border: 2px solid #fff8;
  box-shadow: 0 0 0 1px #b9c2a8;
  touch-action: manipulation;
}
.look-swatch[aria-pressed="true"] {
  box-shadow:
    0 0 0 2px #f1eddf,
    0 0 0 4px #6f8a64;
}
/* Looking glass + migration card: the same sheet in a bottom sheet. */
#mirror-sheet,
#migrate-card {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet, 14);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #0e211c3b;
  pointer-events: auto;
}
#mirror-sheet[hidden],
#migrate-card[hidden] {
  display: none;
}
/* While the Looking glass is open the figure is the subject: the tutorial steps aside, and on a phone the sheet keeps the top half for the figure. */
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #kout-sit {
    right: 15px;
    bottom: calc(108px + var(--safe-bottom));
    width: 200px;
  }
  #chat {
    left: 14px;
    bottom: calc(100px + var(--safe-bottom));
  }
  #chat-button {
    width: 44px;
    height: 44px;
  }
  #chat-form {
    height: 44px;
  }
  #chat-lines {
    max-height: 96px;
  }
  #chat-person {
    right: 15px;
    bottom: calc(108px + var(--safe-bottom));
  }
  body.chat-open #context {
    display: none;
  }
  #mirror-sheet {
    background: linear-gradient(180deg, transparent 40%, #0e211c3b);
  }
  #mirror-sheet .mirror-card {
    max-height: 52dvh;
  }
}
.mirror-card {
  width: min(480px, 100%);
  max-height: min(72dvh, 640px);
  overflow-y: auto;
  background: var(--ui-win);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  font-family: var(--ui-font);
  border-radius: 20px 20px 0 0;
  padding: 24px 24px calc(20px + var(--safe-bottom));
  box-shadow: 0 20px 70px #10251e55;
  touch-action: pan-y;
}
.mirror-card .eyebrow {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ui-muted);
  margin-bottom: 8px;
}
.mirror-card h2 {
  margin: 0;
  font: 600 20px / 1.25 var(--ui-font);
  color: var(--ui-accent);
}
.mirror-card p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ui-muted);
  margin: 10px 0 14px;
}
.mirror-card .look-part {
  margin: 4px 0;
}
.mirror-card .look-arrow {
  background: var(--ui-cell);
  border-color: var(--ui-line);
  color: var(--ui-text);
}
.mirror-card .look-name,
.mirror-card .look-name i {
  color: var(--ui-muted);
}
.mirror-card .look-name b {
  color: var(--ui-text);
  font-family: var(--ui-font);
}
.mirror-card .look-roll {
  background: var(--ui-cell);
  border-color: var(--ui-line);
  color: var(--ui-text);
}
.mirror-card .look-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--ui-win), 0 0 0 4px var(--ui-accent);
}
.mirror-tools {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.mirror-rows {
  border-top: 1px solid var(--ui-line);
  padding-top: 10px;
  margin-bottom: 6px;
}
.mirror-actions {
  margin-top: 14px;
}
.mirror-actions .primary.gold {
  background: var(--ui-accent);
  color: #1e332a;
}
.mirror-actions .text-button {
  margin-top: 4px;
  color: var(--ui-text);
}
@media (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  #mirror-sheet,
  #migrate-card {
    align-items: center;
    padding: 20px;
  }
  .mirror-card {
    border-radius: 19px;
    padding: 28px 28px 24px;
  }
  /* The Looking glass docks right so the figure stands in the open space on the left (mirrorCamera frames it there). */
  #mirror-sheet {
    justify-content: flex-end;
    padding-right: max(20px, 4vw);
    background: linear-gradient(90deg, transparent 35%, #0e211c3b);
  }
}
/* Trading (docs/trading-plan.md §4): player card actions, the 30 s ask banner, the bottom sheet, TRADING labels, the parcel. Saffron marks the other side's changes. */
#chat-person .card-actions {
  display: flex;
  gap: 6px;
}
#chat-person .card-actions button {
  flex: 1;
  min-height: 44px;
  border-radius: 8px;
  background: #b5c4ae1c;
  color: #ece5cf;
  border: 1px solid #c6d1b93b;
  font-size: 12px;
}
#chat-person .card-trade {
  margin: 6px 0 10px;
  min-height: 46px;
  font-size: 12px;
}
#chat-person .card-trade svg {
  width: 18px;
  height: 18px;
}
.resident .trade-row {
  background: var(--gold);
  color: #2e4335;
  font-weight: 600;
  min-height: 44px;
}
.world-label.resident.trading small {
  color: var(--saffron);
  font-weight: 700;
  letter-spacing: 1.4px;
}
.equipment > div,
.equipment > button {
  flex-wrap: wrap;
}
/* A trade request and a ring challenge share one banner: the words, the answers, a clock running out beneath. */
:is(#trade-banner, #duel-challenge-banner) {
  position: fixed;
  z-index: var(--z-window-3, 12);
  left: 50%;
  bottom: calc(118px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px));
  border-radius: 14px;
  padding: 10px 10px 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  font-size: 12px;
}
:is(#trade-banner, #duel-challenge-banner)[hidden] {
  display: none;
}
:is(#trade-banner, #duel-challenge-banner) .tb-text {
  flex: 1 1 160px;
  line-height: 1.4;
}
#duel-challenge-banner .tb-text {
  flex-basis: 100%;
}
#duel-challenge-banner button {
  flex: 1 1 auto;
}
:is(#trade-banner, #duel-challenge-banner) .tb-text small {
  display: block;
  color: #b9c2ad;
}
:is(#trade-banner, #duel-challenge-banner) strong {
  color: var(--gold);
  font-weight: 600;
}
:is(#trade-banner, #duel-challenge-banner) button {
  width: auto;
  min-height: 44px;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
:is(#trade-banner, #duel-challenge-banner) .tb-open {
  background: var(--gold);
  color: #2e4335;
}
:is(#trade-banner, #duel-challenge-banner) .tb-no {
  background: transparent;
  color: #ece5cf;
  border: 1px solid #ffffff55;
}
:is(#trade-banner, #duel-challenge-banner) button:disabled {
  opacity: 0.45;
}
:is(#trade-banner, #duel-challenge-banner) .tb-clock {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--gold);
  transform-origin: left;
  animation: trade-clock 30s linear forwards;
}
@keyframes trade-clock {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
#trade-sheet header {
  flex-shrink: 0;
  position: relative;
  padding: 14px 60px 10px 20px;
}
#trade-sheet header .eyebrow {
  font-size: 8px;
}
#trade-sheet h2 {
  margin: 4px 0 2px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
}
#trade-sheet h2 .tplace {
  font-size: 15px;
}
#trade-sheet .close-button {
  width: 44px;
  height: 44px;
  top: 12px;
  right: 12px;
}
#trade-sheet .tbody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Your coins: the coin, the amount offered, the purse beside it; under each side, what it is worth. */
#trade-sheet .tcoins {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  font: 600 12px / 1 var(--ui-font, system-ui);
}
#trade-sheet .tcoins svg {
  width: 15px;
  height: 15px;
  color: var(--ui-accent, #ccb773);
}
#trade-sheet .tcoins span {
  color: var(--ui-muted, #98a38b);
  font-weight: 500;
  white-space: nowrap;
}
#trade-sheet .tcoins input {
  width: 110px;
  padding: 6px 8px;
  border: 1px solid var(--ui-line, #ccb77366);
  border-radius: 6px;
  background: var(--ui-cell, #0c1b14);
  color: inherit;
  color-scheme: dark;
  flex: 1 1 70px;
  min-width: 0;
  max-width: 110px;
}
#trade-sheet .tvalue {
  display: block;
  color: var(--ui-muted, #98a38b);
}
.trow {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  min-height: 56px;
  padding: 2px 0 4px;
  align-items: center;
  scrollbar-width: thin;
}
.trow.theirs {
  border-radius: 9px;
  padding: 3px 4px 5px;
}
.tempty {
  margin: 0;
  font-size: 11px;
  padding: 0 4px;
}
.tpack {
  display: grid;
  grid-template-columns: repeat(7, minmax(44px, 1fr));
  gap: 5px;
}
@keyframes trade-flash {
  0%,
  35% {
    background: var(--saffron);
    border-color: #c9851f;
    box-shadow: 0 0 0 3px #e8a33a66;
  }
  100% {
    background: var(--ui-cell);
    border-color: var(--ui-line);
    box-shadow: none;
  }
}
#trade-sheet footer {
  flex-shrink: 0;
}
.tstatus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 8px;
}
.tstatus .ok {
  font-weight: 650;
}
.tstatus .tafter {
  margin-left: auto;
  font-size: 11px;
}
.tstatus .tafter.over {
  font-weight: 650;
}
.tstatus .tlimits {
  flex-basis: 100%;
  font-size: 11px;
}
#trade-accept {
  min-height: 50px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
}
#trade-accept.counting {
  font-variant-numeric: tabular-nums;
}
.trade-parcel {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--saffron);
  color: #5b3a12;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px #1a302555;
}
.trade-parcel svg,
.trade-parcel .art-or > svg {
  width: 18px;
  height: 18px;
}
.trade-parcel:has(img) {
  background: none;
  box-shadow: none;
}
.trade-parcel img {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 3px 4px #1a302566);
}
body.trading #context,
body.trading #quest,
body.trading #chat-person {
  display: none;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #trade-sheet h2 {
    font-size: 20px;
  }
  #trade-sheet header {
    padding: 12px 60px 9px 18px;
  }
  #trade-sheet .tbody {
    padding: 6px 14px 6px;
  }
  .tpack {
    gap: 4px;
  }
  .trow {
    min-height: 54px;
  }
  #trade-sheet footer {
    padding: 8px 14px 12px;
  }
  body.trading #interface,
  body.trading #chat {
    display: none;
  }
}
/* The town-chat button sits top-left over the Kout table; the table's wordmark steps right of it. */
body.kout-open #kout-view .wordmark {
  margin-left: 52px;
}
/* Banana Protocol uses the same full-screen seat convention as Kout. */
#protocol-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-fullscreen, 30);
  background: var(--cream);
}
#protocol-frame {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.protocol-open > #world,
.protocol-open > #vignette,
.protocol-open > #labels,
.protocol-open > #header,
.protocol-open > #interface,
.protocol-open > #place,
.protocol-open > #quest,
.protocol-open > #context,
.protocol-open > #saved,
.protocol-open > #chat {
  display: none !important;
}
#protocol-sit {
  position: fixed;
  z-index: var(--z-window-3, 12);
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  width: min(330px, calc(100vw - 32px));
  padding: 22px;
  border-radius: 13px;
  color: var(--cream);
}
#protocol-sit h3 {
  font:
    28px Georgia,
    serif;
  margin: 10px 0;
}
#protocol-sit .eyebrow {
  color: var(--gold);
  font-size: 9px;
  line-height: 1.7;
}
#protocol-sit p {
  font-size: 12px;
  line-height: 1.6;
}
#protocol-sit ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
#protocol-sit li {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid #f0ebdc25;
  font-size: 12px;
}
#protocol-sit button {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  border-radius: 8px;
}
#protocol-sit .primary {
  background: var(--gold);
  color: var(--ink);
}

/* Phone polish: explicit tutorial controls and measurable, non-overlapping place targets. */
#quest .eyebrow {
  font-size: 10px;
}
#place {
  background: var(--glass);
  padding: 6px 10px;
  border-radius: 10px;
}
#header .brand {
  background: var(--glass);
  padding: 8px 12px;
  border-radius: 12px;
}
#header .brand small {
  font-size: 10px;
  letter-spacing: 0.08em;
}
#connection {
  font-size: 11px;
  letter-spacing: 0.6px;
}
#place small {
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 1;
}
#context button:disabled {
  opacity: 0.65;
  cursor: default;
}

@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  .world-label,
  .world-label.resource,
  .world-label.place,
  .world-label.npc {
    font-size: 11px;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 10px;
    letter-spacing: 0.4px;
  }
  .world-label small,
  .world-label.npc small {
    font-size: 9px;
  }
  #context .eyebrow {
    font-size: 9px;
    line-height: 1.4;
  }
  #context p {
    font-size: 11px;
  }
  .recipe button {
    min-height: 42px;
    white-space: normal;
    max-width: 125px;
  }
  #panel[data-kind="examine"] {
    height: auto;
    max-height: 80dvh;
  }
  #panel[data-kind="examine"] #panel-content:empty {
    display: none;
  }
}
/* Game records inherit the Grove's paper ledger and dark player card. */
.record-owner {
  font:
    22px Georgia,
    serif;
  margin: 0 0 18px;
  overflow-wrap: anywhere;
}
.record-owner span {
  display: block;
  font:
    11px Inter,
    sans-serif;
  color: var(--muted);
  margin-top: 5px;
}
.record-game {
  margin: 0 0 28px;
}
.record-game h3 {
  font:
    24px Georgia,
    serif;
  margin: 0 0 12px;
}
.record-game + .record-game {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.record-score {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.record-score > strong {
  font:
    30px Georgia,
    serif;
  color: var(--green);
}
.record-score small {
  font:
    13px Inter,
    sans-serif;
}
.record-score > span {
  font-size: 12px;
  color: var(--green);
}
.record-ledger {
  margin: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.record-ledger > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.record-ledger dt {
  color: var(--ink);
}
.record-ledger dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.record-honours {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.record-honours li {
  padding: 7px 10px;
  border: 1px solid #baa16c;
  border-radius: 6px;
  color: #705523;
  font-size: 11px;
  background: #d9b97822;
}
.record-ranks {
  list-style: none;
  padding: 0;
  margin: 0;
}
.record-ranks button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  min-height: 64px;
}
.record-ranks button:hover {
  background: #d9b97822;
}
.record-rank {
  font:
    22px Georgia,
    serif;
  color: var(--green);
  width: 18px;
  flex-shrink: 0;
}
.record-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.record-ranks small {
  display: block;
  font-size: 10px;
  color: #586850;
  font-weight: 400;
  margin-top: 5px;
}
.record-ranks strong {
  text-align: right;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.records-link {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  padding: 10px;
  font-size: 13px;
}
#chat-person .record-strip {
  border-top: 1px solid #c6d1b93b;
  border-bottom: 1px solid #c6d1b93b;
  padding: 10px 0 2px;
  margin: 10px 0 4px;
}
#chat-person .record-strip strong {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gold);
}
#chat-person .record-strip p {
  font-size: 11px;
  margin: 5px 0 9px;
  color: var(--cream);
}
.world-label.records {
  font-size: 10px;
  min-height: 36px;
  background: var(--glass);
  color: var(--cream);
  border: 1px solid var(--gold);
}

/* Touch screens: the narrow layout's 35px Settings control and the 34px panel close need a 44px target. Fine pointers keep those sizes. */
@media (hover: none) and (pointer: coarse) {
  #settings {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  #panel .close-button,
  #trade-sheet .close-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}
/* Fight-card key names (Space, E) only where a keyboard is the way you play. The button words stay. */
#context button[data-dodge] > span.key-hint,
#context button[data-attack] > span.key-hint {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  #context button[data-dodge] > span.key-hint,
  #context button[data-attack] > span.key-hint {
    display: inline;
  }
}
#password-form {
  margin-top: 4px;
}
#password-form label {
  display: block;
  margin: 10px 0 8px;
}
#account-password {
  width: 100%;
  background: #e6e7d6;
  border: 1px solid #d7dcc7;
  border-radius: 6px;
  min-height: 43px;
  font-size: 13px;
  color: #4e6246;
  padding: 10px 12px;
}
#password-form .secondary-button {
  margin-top: 12px;
}
/* The right-click / hold menu: the verb a click would perform, then Walk here / Examine / Cancel. */
#world-menu small {
  display: block;
  font-weight: 500;
  margin-top: 3px;
}
/* The keyboard target's tip, in the band at the top of the screen; the item tip's box with a gold ring. */
#kb-tip {
  position: fixed;
  top: calc(var(--hud-m, 12px) + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-tip, 61);
  pointer-events: none;
  max-width: 220px;
  padding: 5px 8px;
  white-space: nowrap;
  background: #0d1512;
  color: var(--ui-text);
  border: 1px solid var(--ui-trim);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-frame);
  font: 700 11px/1.35 var(--ui-font);
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
#kb-tip small {
  display: block;
  font-weight: 500;
  margin-top: 3px;
}
.keys-help {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.keys-help th,
.keys-help td {
  text-align: left;
  vertical-align: middle;
  padding: 6px 5px;
  border-bottom: 1px solid #0000001a;
}
.keys-help thead th {
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0.7;
}
.keys-help th[scope="row"] {
  font-weight: 600;
  width: 38%;
}
.keys-help td {
  color: var(--ui-muted);
}
.keys-help td.keys {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.keys-help kbd {
  display: inline-block;
  min-width: 20px;
  margin: 0 0 2px 3px;
  padding: 2px 5px;
  border: 1px solid var(--ui-line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--ui-cell);
  color: var(--ui-text);
  font: 700 11px / 1.2 var(--ui-font);
  text-align: center;
}
.keys-help td.keys small {
  font-size: 11px;
}
/* A rebindable key in the Controls list: a small key-sized button, in a row with the fixed key chips. */
#panel .keys-help td.keys .key-bind {
  display: inline-block;
  width: auto;
  min-width: 26px;
  min-height: 26px;
  margin: 0 0 2px 3px;
  padding: 2px 6px;
  font: 700 11px / 1.2 var(--ui-font);
}
/* The menu and the tips are the top layer: they open over every window (bank, shop, exchange, trade, item info). */
#world-menu button {
  flex-shrink: 0;
}
#world-menu button {
  background: transparent;
  text-align: left;
  min-height: 44px;
  padding: 8px 12px;
}
#world-menu .menu-head {
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 4px 12px 5px;
  border-bottom: 1px solid #ffffff1f;
  margin-bottom: 2px;
}
#world-menu button:nth-child(2) {
  font-weight: 650;
}
.opt-verb {
  color: #f4efdc;
}
.opt-name {
  font-weight: 650;
}
.opt-more {
  font-weight: 500;
}
[data-pack],
[data-worn],
[data-stat] {
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.recipe button.secondary {
  background: #dce3ce;
  color: #577047;
  white-space: nowrap;
}
.dest-split {
  display: flex;
  gap: 4px;
  min-width: 0;
}
.dest-split > button:first-child {
  flex: 1;
  min-width: 0;
}
.map-travel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f3e4d6;
}
.map-travel p {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
}
.map-travel button {
  flex: 1 1 auto;
}
#compass .rose,
#compass .dest {
  position: absolute;
  inset: 0;
}
#compass .rose b {
  position: absolute;
  left: 50%;
  top: 1px;
  transform: translateX(-50%);
  font:
    700 8px/1 system-ui,
    sans-serif;
  letter-spacing: 0;
  color: #fff6dc;
}
#compass .rose::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  bottom: 50%;
  width: 2px;
  margin-left: -1px;
  background: #fff6dc;
  border-radius: 1px;
}
#compass .rose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: 10px;
  width: 2px;
  margin-left: -1px;
  background: #fff6dc55;
  border-radius: 1px;
}
#compass .dest i {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #e9c877;
  box-shadow: 0 0 0 1.5px #14332299;
}
#compass .dest.short i {
  background: #d9967a;
}
/* Gate 3A · quantities, previews, bank supplies */
.qty-sheet {
  margin: 6px 0 16px;
  padding: 12px;
  border-radius: 10px;
  background: #e6e9da;
  border: 1px solid #d3dac3;
  font-size: 11px;
  color: #56694e;
}
.qty-head {
  font:
    15px Georgia,
    serif;
  margin-bottom: 9px;
}
.qty-head small {
  display: block;
  font:
    10px system-ui,
    sans-serif;
  color: #7c8474;
  margin-top: 3px;
}
.qty {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-bottom: 9px;
}
.qty-chip,
.qty-x {
  flex: 1;
  min-height: 44px;
  border-radius: 7px;
  border: 1px solid #c9d2b9;
  background: #f2efe1;
  color: #4c6245;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
}
.qty-chip.on,
.qty-x.on {
  background: #446c56;
  color: #f2eedb;
  border-color: #446c56;
}
.qty-chip:disabled {
  opacity: 0.4;
}
.qty-x {
  flex: 1.4;
}
.qty-x input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 0;
  border-radius: 5px;
  background: #fffdf3;
  color: #2e4335;
  font-size: 16px;
  text-align: center;
  padding: 0 2px;
}
.qty-preview {
  list-style: none;
  margin: 0 0 9px;
  padding: 0;
  line-height: 1.6;
}
.qty-preview li + li {
  border-top: 1px dashed #cfd6c0;
  margin-top: 3px;
  padding-top: 3px;
}
.qty-warn {
  color: #9a5a3e;
  margin: 6px 0;
}
.qty-changed {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  margin: 0 0 9px;
  border-radius: 8px;
  background: #f3e4d6;
  color: #7a4a33;
  font-size: 11px;
  line-height: 1.5;
}
.qty-changed button {
  min-height: 40px;
  border-radius: 6px;
  background: #d9967a;
  color: #fff8ea;
  font-weight: 600;
}
.one-cycle {
  font-size: 8px;
  color: #6f7f62;
  margin-top: 4px;
}
.one-cycle.missing {
  color: #a37560;
}
.recipe button + button {
  margin-left: 6px;
}
.supplies {
  display: flex;
  gap: 8px;
}
.supplies > div {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}
.supplies small {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
}
.supplies strong {
  display: block;
  font:
    20px Georgia,
    serif;
  margin: 4px 0 2px;
}
.supplies span {
  font-size: 9px;
  color: #7c8474;
}
.item.picked {
  border-color: #446c56;
  box-shadow: 0 0 0 2px #446c5655;
  background: #dfe7d2;
}
.item .item-keep {
  position: absolute;
  left: 5px;
  top: 4px;
  font-size: 6.5px;
  letter-spacing: 0.6px;
  background: #446c56;
  color: #f2eedb;
  border-radius: 3px;
  padding: 1px 3px;
}
.keep-row {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #d3dac3;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.keep-row small {
  color: #7c8474;
}
.keep-buttons {
  display: flex;
  gap: 6px;
}
.keep-buttons button {
  flex: 1;
  min-height: 40px;
  border-radius: 6px;
  background: #dce3ce;
  color: #4c6245;
  font-size: 11px;
}
.deposit-box {
  margin-top: 18px;
  padding: 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.6;
  color: #5f6f55;
}
.deposit-box p {
  margin: 0 0 8px;
}
.deposit-box .secondary-button,
.deposit-box .text-button {
  margin-top: 8px;
}
.primary.danger {
  background: #a4664a;
}
.shop-row .qty-open {
  margin-left: 6px;
  background: #eef0e2;
}
#context .cook-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
#context .cook-row > button:first-child {
  flex: 1;
}
#context .cook-row .qty-open {
  width: auto;
  flex: none;
  margin-top: 0;
}
#context .cook-row + .cook-row {
  margin-top: 6px;
}
#context .qty-sheet {
  background: #ffffff12;
  border-color: #ffffff24;
  color: #efe9d2;
  margin: 8px 0;
}
#context .qty-chip,
#context .qty-x {
  background: #ffffff1c;
  border-color: #ffffff30;
  color: #f5efd9;
  min-height: 40px;
  padding: 0 4px;
  justify-content: center;
}
#context .qty-chip.on,
#context .qty-x.on {
  background: var(--gold);
  color: #2e4335;
}
#context .qty-x input {
  height: 30px;
  font-size: 16px;
}
#context .qty-preview {
  font-size: 9px;
}
#context .qty-changed {
  font-size: 9px;
}
.qty-x input::placeholder {
  color: #aab29c;
  font-size: 11px;
}
#context .qty-x input::placeholder {
  color: #ffffff66;
}

/* Game messages (Examine): the chat box's All and Game tabs hold them. With Settings › Layout › Game message lines on,
   the latest few also fade just above the chat box (features/chat.js puts #game-log first in #chat); they never catch a
   press meant for the world. */
#game-log {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  pointer-events: none;
}
#game-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  max-width: 100%;
}
#game-lines li {
  pointer-events: none;
  background: #1f3529e0;
  color: #f3eedb;
  font-size: 12px;
  line-height: 1.45;
  padding: 6px 11px;
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 2px 10px #10251e33;
  overflow-wrap: anywhere;
}
#game-lines time {
  display: none;
  font-size: 10px;
  color: #a9b5a3;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
body.chat-open #game-log {
  display: none;
}

/* Buildings, not their labels, are the interface: place names are off unless chosen in Settings (still reachable by Tab). */
.world-label.quiet {
  opacity: 0;
  pointer-events: none;
}
.world-label.quiet:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Once play begins the brand takes no room and catches nothing; it stays on the loading and welcome cards. */
body.playing #header .brand {
  display: none;
}
/* In play the version shows only when an update is waiting. */
body.playing #build-version:not(.update) {
  display: none;
}
#build-version {
  position: fixed;
  left: 50%;
  bottom: calc(2px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: var(--z-build, 71);
  pointer-events: auto;
  color: #f5f0dd;
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  border-radius: 6px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
#build-version.update {
  color: #f5d58d;
}
body:not(.playing) #build-version:not(.update) {
  left: auto;
  right: max(8px, env(safe-area-inset-right));
  transform: none;
  opacity: 0.55;
}
/* Panels take their content's height, up to the viewport; long ones scroll inside. */
#panel {
  bottom: auto;
  max-height: calc(100dvh - 40px);
}
#panel-content {
  flex: 1 1 auto;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #context .qty {
    gap: 4px;
  }
  #context .qty-x {
    flex: 1.2;
  }
  .qty-sheet {
    padding: 10px;
  }
  .recipe {
    flex-wrap: wrap;
  }
  .recipe button + button {
    margin-left: 0;
  }
  #panel {
    top: auto;
    bottom: 0;
    height: auto;
    max-height: min(90dvh, 780px);
  }
}
@media (max-height: 670px) and (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  #panel {
    max-height: calc(100dvh - 24px);
  }
}

/* Fight card: quick food and a way out, side by side */
#context .fight-row {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}
#context .fight-row button {
  margin-top: 0;
  flex: 1;
  min-height: 44px;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
}
#context .fight-row .key-hint {
  font-weight: 500;
  opacity: 0.75;
}

/* Remembrance (skill web P7): the elite skill's row, the live echo card, the run plan and Elowen's keepsakes. */
.skill-row.elite {
  margin: 14px -12px 4px;
  padding: 17px 14px;
  border: 1px solid #c9b88e;
  border-radius: 12px;
  background: linear-gradient(135deg, #ece6d0, #e4e8dd 55%, #dfe4ea);
  box-shadow: inset 0 0 0 1px #fff8;
}
.skill-row.elite h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.skill-row.elite h3 em {
  font: 600 7px system-ui;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #8a6f3a;
  background: #f3e6c2;
  border: 1px solid #d8c28c;
  border-radius: 9px;
  padding: 3px 7px;
}
.skill-row.elite .level {
  color: #8a6f3a;
}
.skill-row.elite .bar {
  background: #d9d6c6;
}
.skill-row.elite .bar > i {
  background: linear-gradient(90deg, #b99a5c, #a9bcd8);
}
.skill-row.elite .held {
  margin: 9px 0 0;
  font-size: 11px;
  color: #7a5f2f;
  font-weight: 550;
}
.skill-row.elite .subtext {
  font-size: 10px;
  margin: 8px 0 10px;
}
.plan {
  border: 1px dashed #cfd4c1;
  border-radius: 10px;
  padding: 10px 14px;
}
.plan p {
  font-size: 10px;
  color: #6f7b67;
  line-height: 1.7;
  margin: 4px 0;
}
.echo-others {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.echo-others .secondary-button {
  min-height: 36px;
  font-size: 10px;
  text-align: left;
}
.keepsake.owned h3::after {
  content: " ✓";
  color: #8a6f3a;
}
.keepsake .done {
  color: #8a6f3a;
}
.keepsake .later {
  color: #9aa08f;
  font-style: italic;
}
.keepsake button:disabled {
  background: #e2e3d6;
  color: #8d9482;
}
/* Materials as picture chips (bank.js needChips): the item, have / need, red while short. */
.needs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.needs-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}
.needs-alt > small {
  margin-top: 4px;
}
.need {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 8px 0 3px;
  border-radius: 12px;
  border: 1px solid var(--ui-line);
  background: var(--ui-cell);
  font: 500 11px / 1 var(--ui-font);
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.need > span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.need :is(svg, .item-thumb) {
  width: 18px;
  height: 18px;
}
.need > i {
  font-style: normal;
}
.need b {
  font-weight: 700;
  color: var(--ui-good);
}
#iface-content :is(.echo-slot, .echo-comp) .list-main small {
  display: block;
  margin-top: 1px;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ui-muted);
}
.need.short {
  border-color: rgba(200, 70, 62, 0.45);
}
.need.short b {
  color: var(--ui-bad);
}
.need.later {
  padding-left: 8px;
  font-style: italic;
}
/* A row's level or reward as a small chip beside its name. */
.list-main .lv {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  font: 600 10px / 1.3 var(--ui-font);
  color: var(--ui-accent);
  vertical-align: 1px;
}
#panel .win-pop-row > button {
  width: auto;
  flex: 1 1 0;
}
/* Make-X: the shared quantity row across the window; the dish with what it heals and its XP. */
#make-x .qty-seg {
  display: flex;
  margin: 2px 0 6px;
}
#make-x .qty-seg > button {
  flex: 1 1 auto;
}
#make-x .make-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ui-text);
  font-weight: 600;
}
#make-x .make-name span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ui-muted);
  font-weight: 500;
  font-size: 11px;
}
#make-x .make-name svg {
  width: 12px;
  height: 12px;
  color: var(--ui-bad);
}
/* Echoes as a skill panel: a chip row on top, each echo's state in one line, the queue as pack-style tiles (charges in
   the corner; move and remove on hover), the types to add as dimmed tiles with a plus, then Send. */
.chip-row .pill svg {
  width: 12px;
  height: 12px;
}
.echo-top {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 6px;
}
.echo-top .pill {
  font-size: 11px;
}
#iface-content .echo-live,
#panel .echo-live {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  margin-bottom: 4px;
}
.echo-live .echo-state-art {
  flex: none;
  width: 32px;
  height: 32px;
}
.echo-line {
  flex: 1;
  min-width: 0;
  font: 400 12px / 1.3 var(--ui-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.echo-line small {
  display: block;
  color: var(--ui-muted);
  font-size: 11px;
}
.echo-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}
.echo-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--ui-slot-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  color: var(--ui-text);
}
.echo-tile :is(.item-thumb, .skill-art, svg):not(.echo-tile-ops *, .echo-plus *) {
  width: 70%;
  height: 70%;
}
.echo-tile .cnt {
  position: absolute;
  left: 3px;
  top: 1px;
  font: 700 10px / 1 var(--ui-font);
  color: var(--ui-stack);
  text-shadow: 1px 1px 0 #000;
}
.echo-tile-ops {
  position: absolute;
  inset: auto 0 0 0;
  display: none;
  justify-content: space-between;
}
.echo-tile:hover .echo-tile-ops,
.echo-tile:focus-within .echo-tile-ops {
  display: flex;
}
:is(#panel, #iface-content) .echo-tile-ops > button {
  width: 16px;
  min-height: 0;
  height: 16px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 3px;
  background: #0d1512cc;
  color: var(--ui-text);
}
.echo-tile-ops > button:disabled {
  visibility: hidden;
}
.echo-tile-ops svg {
  width: 11px;
  height: 11px;
}
.echo-tile.add > :not(.echo-plus) {
  opacity: 0.45;
}
.echo-tile.add:hover > :not(.echo-plus) {
  opacity: 0.8;
}
.echo-plus {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: none;
}
.echo-tile.add:hover .echo-plus {
  display: block;
}
.echo-plus svg {
  width: 12px;
  height: 12px;
}
.echo-empty {
  margin: 4px 0 6px;
}
.echo-acts {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
:is(#panel, #iface-content) .echo-acts > button {
  flex: 1;
}
/* A keepsake row: its picture, name and reward, what it does, then its materials. */
.list-row.keepsake {
  align-items: flex-start;
}
.list-row.keepsake .row-acts {
  align-self: center;
}
.list-row.keepsake .list-main > small:last-child {
  font-style: italic;
}
/* A project's needs (Commons, the Keep): carried and banked as small icons, a bar of what is paid. */
.cost-line .list-main small svg {
  width: 11px;
  height: 11px;
  margin: 0 2px 0 0;
  vertical-align: -1px;
}
.cost-line .cost-count {
  flex: none;
  font: 700 13px / 1 var(--ui-font);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
.list-row.recipe-row {
  align-items: flex-start;
}
.list-row.recipe-row .row-acts {
  align-self: center;
}
#panel .list-main small b.bad {
  color: var(--ui-bad);
}
#panel .list-main small b.ok {
  color: var(--ui-good);
}
#panel .list-main small > svg {
  width: 11px;
  height: 11px;
  margin: 0 2px;
  vertical-align: -1px;
  color: var(--ui-accent);
}
:is(#panel, #iface-content) .subtext > svg {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
  color: var(--ui-accent);
}
#panel .win-pop p svg {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
}
/* ---- Phase 6 (art flag only): the interface around the new characters. body.art is set by app.js with ?art=1. ----
   One scale: secondary 12, body 14, headings 16, numbers 14, card titles 19 (Georgia); icons 20;
   spacing 8 (pad 12); controls at least 44. The player and the target keep the middle of every screen. */
body.art {
  --ui-2xs: 12px;
  --ui-xs: 12px;
  --ui-s: 14px;
  --ui-num: 14px;
  --ui-l: 19px;
  --ui-icon: 20px;
  --ui-gap: 8px;
  --ui-pad: 12px;
  --ui-tap: 44px;
}
body.art .eyebrow {
  font-size: var(--ui-2xs);
  letter-spacing: 1.4px;
}
/* Context card: one type scale; the fight card lays its controls in a grid so it stays short. */
body.art #context h3 {
  font-size: var(--ui-l);
}
body.art #context p {
  font-size: var(--ui-xs);
  line-height: 1.45;
}
body.art #context button {
  font-size: var(--ui-s);
  min-height: var(--ui-tap);
}
body.art #context .small-row {
  font-size: var(--ui-xs);
  font-variant-numeric: tabular-nums;
}
body.art #context:has(.combat-kit) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6px;
  align-content: start;
}
body.art #context:has(.combat-kit) > * {
  grid-column: 1/-1;
}
body.art #context:has(.combat-kit) .fight-row {
  margin-top: 6px;
}
body.art #context:has(.combat-kit) > button {
  grid-column: auto;
  margin-top: 6px;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  flex-direction: column;
}
body.art #context:has(.combat-kit) > button > .key-hint {
  font-size: var(--ui-2xs);
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.3px;
}
body.art #context .auto-fight {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.art #context .health-bar {
  margin: 6px 0;
}
/* Loot: what lies there, as pictures, under the words that say it. */
.loot-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  pointer-events: none;
}
.loot-strip span {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #ffffff14;
  border: 1px solid #ffffff1f;
}
.loot-strip svg {
  width: 22px;
  height: 22px;
}
.loot-strip .item-thumb {
  width: 34px;
  height: 34px;
}
.loot-strip b {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: var(--ui-2xs);
  color: #f3eedb;
  font-variant-numeric: tabular-nums;
}
/* Item thumbnails rendered from the gear models (decorative: they never take a pointer). */
.item-thumb {
  display: block;
  flex: none;
  width: var(--ui-icon, 22px);
  height: var(--ui-icon, 22px);
  background: center/contain no-repeat;
  pointer-events: none;
}
/* Painted badges beside text: skill rows, the combat bar, the wiki, the fight card and the XP tracker. */
.skill-row h3,
.wiki-title,
#xp-tracker strong {
  display: flex;
  align-items: center;
  gap: 8px;
}
.skill-row .skill-art {
  width: 28px;
  height: 28px;
}
.combat-art {
  width: 20px;
  height: 20px;
}
.wiki-title .wiki-art {
  width: 40px;
  height: 40px;
}
.wiki-title .wiki-portrait {
  width: 64px;
  height: 64px;
}
#context .eyebrow .eyebrow-art {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
}
#xp-tracker strong svg {
  width: 13px;
  height: 13px;
}
body.art .item .item-thumb {
  width: 40px;
  height: 40px;
  margin: -4px 0 -2px;
}
body.art .item-detail .item-thumb {
  width: 64px;
  height: 64px;
}
body.art .equipment .item-thumb {
  width: 32px;
  height: 32px;
}
body.art .recipe-icon .item-thumb {
  width: 38px;
  height: 38px;
}
body.art .shop-row .item-thumb,
body.art .cost-row .item-thumb {
  width: 30px;
  height: 30px;
}
body.art #world-menu .menu-thumb {
  float: left;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -3px 8px 0 -4px;
  border-radius: 6px;
  background: #ffffff14;
  pointer-events: none;
}
body.art #world-menu .menu-thumb svg {
  width: 18px;
  height: 18px;
}
body.art #world-menu .menu-thumb .item-thumb {
  width: 26px;
  height: 26px;
}
body.art #world-menu button {
  display: flow-root;
  font-size: var(--ui-s);
}
body.art #world-menu small {
  font-size: var(--ui-2xs);
}
/* Panels: names, captions and counts on the same scale. */
body.art .item .item-name {
  font-size: var(--ui-2xs);
  line-height: 1.25;
}
body.art .item .item-count {
  font-size: var(--ui-2xs);
  font-variant-numeric: tabular-nums;
}
body.art .section-title {
  font-size: var(--ui-2xs);
}
body.art .equipment > div,
body.art .equipment > button {
  font-size: var(--ui-xs);
  min-height: var(--ui-tap);
}
body.art .equipment small {
  font-size: var(--ui-2xs);
}
/* A worn item takes the whole row, so its picture, name and Take off sit on one line; empty slots pair up. */
body.art .equipment > div:not(.empty) {
  grid-column: 1/-1;
  flex-wrap: nowrap;
}
body.art .equipment > div:not(.empty) > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
/* Nameplates: readable at the closer camera; app.js keeps them from piling up on every screen. */
body.art .world-label {
  font-size: var(--ui-2xs);
}
body.art .world-label.npc,
body.art .world-label.resident {
  font-size: var(--ui-xs);
}
body.art .world-label.npc small,
body.art .world-label.resident small {
  font-size: 9px;
}
body.art #game-lines li {
  font-size: var(--ui-s);
}

/* Phone portrait: the context card docks along the bottom above the toolbar (beside the chat button) instead of
   covering the right third, so the fight in the middle of the screen stays open. It stops short of the tab column on
   the right, so Dodge and Return are never under it. */
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #game-log {
    left: 14px;
    transform: none;
    bottom: calc(100px + var(--safe-bottom));
    width: calc(100vw - 225px);
    align-items: flex-start;
  }
  #game-lines {
    align-items: flex-start;
  }
  #game-lines li {
    font-size: 11px;
    text-align: left;
  }
  #chat:not([hidden]) ~ #game-log {
    bottom: calc(156px + var(--safe-bottom));
  }
  body.art #context {
    left: 14px;
    right: 66px;
    width: auto;
    bottom: calc(100px + var(--safe-bottom));
    max-height: 42dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 10px 12px;
    border-radius: 12px;
  }
  body.art:has(#chat:not([hidden])) #context {
    left: 66px;
  }
  body.art #context:not(:has(.combat-kit)) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
  }
  body.art #context:not(:has(.combat-kit)) > * {
    flex: 1 1 100%;
  }
  body.art #context:not(:has(.combat-kit)) > button {
    flex: 1 1 40%;
    margin-top: 6px;
  }
  body.art #context .eyebrow {
    font-size: var(--ui-2xs);
  }
  body.art #context h3 {
    font-size: 17px;
    margin: 4px 0 2px;
  }
  body.art #context p {
    font-size: var(--ui-xs);
    margin-bottom: 4px;
  }
  body.art #context button {
    font-size: var(--ui-xs);
    padding: 0 8px;
  }
  body.art #context:has(.combat-kit) {
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    padding: 8px 10px;
  }
  body.art #context:has(.combat-kit) > .eyebrow,
  body.art #context:has(.combat-kit) > p:not(.auto-fight) {
    display: none;
  }
  body.art #context:has(.combat-kit) > p.auto-fight {
    display: block;
  }
  body.art #context:has(.combat-kit) > h3 {
    grid-column: 1/3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.art #context:has(.combat-kit) > .small-row {
    grid-column: 3/5;
    flex-direction: column;
    align-items: flex-end;
    font-size: var(--ui-2xs);
    line-height: 1.35;
  }
  body.art #context:has(.combat-kit) .health-bar {
    margin: 4px 0 2px;
  }
  body.art #context:has(.combat-kit) .auto-fight {
    font-size: var(--ui-2xs);
    color: #cbd3c2;
  }
  body.art #context:has(.combat-kit) > button {
    margin-top: 4px;
    padding: 0 4px;
  }
  body.art #context:has(.combat-kit) .fight-row {
    grid-column: 3/5;
    margin-top: 4px;
    gap: 6px;
  }
  body.art #context:has(.combat-kit) .fight-row button {
    padding: 0 4px;
    font-size: var(--ui-xs);
  }
  body.art #game-log {
    width: calc(100vw - 28px);
    bottom: calc(108px + var(--context-h, 0px) + var(--safe-bottom));
  }
  body.art #chat:not([hidden]) ~ #game-log {
    bottom: calc(max(156px, 108px + var(--context-h, 0px)) + var(--safe-bottom));
  }
}

/* Phone landscape and other short screens: a slim toolbar (icon beside its label, one 44 px row, about 13% of 390 px
   instead of 21%), the context card as a short column at the right edge, no keyboard hint strip. */
@media (max-height: 500px) and (orientation: landscape) {
  body.art #context {
    top: auto;
    bottom: 62px;
    right: max(12px, env(safe-area-inset-right));
    width: 222px;
    max-height: calc(100dvh - 136px);
    padding: 10px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  body.art #context h3 {
    font-size: 17px;
    margin: 4px 0 2px;
  }
  body.art #context:has(.combat-kit) > .eyebrow {
    display: none;
  }
  body.art #context:has(.combat-kit) > h3 {
    margin-top: 0;
  }
  body.art #quest,
  body.art #kout-sit,
  body.art #chat-person {
    bottom: 62px;
  }
  body.art:has(#context:not([hidden])) #quest:not(.collapsed) {
    display: none;
  }
  body.art #chat {
    left: max(12px, env(safe-area-inset-left));
    bottom: max(6px, var(--safe-bottom));
  }
  body.art #game-log {
    bottom: 62px;
  }
  body.art #trade-banner {
    bottom: 62px;
  }
}
/* The duel ring's art is three line icons in a span: icon-sized and drawn, not the pavilion drawing's full-box, unstroked svg (which covered the Practice button and took its clicks). */
body.art .pavilion-art > span svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
}
/* Skill web P6: an echo's nameplate ("Ali · echo"), small muted caps. */
body.art .world-label.resident.echo {
  color: #c3cee2;
  font-variant: small-caps;
  font-size: 8px;
  letter-spacing: 0.9px;
  font-weight: 500;
  opacity: 0.88;
  text-shadow: 0 1px 4px #18223a;
}

/* Avatar v2 portraits reserve their place before the bounded sprite queue finishes. */
body.art.avatar2 .avatar-portrait {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  width: var(--portrait-size, 32px);
  height: var(--portrait-size, 32px);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}
body.art.avatar2 #panel-title .avatar-portrait,
body.art.avatar2 #chat-person h3 .avatar-portrait {
  margin-right: 10px;
}
body.art.avatar2 #mirror-portrait {
  display: block;
  float: left;
  margin-right: 12px;
}
#item-info .close-button {
  position: absolute;
}
#item-info ul {
  margin: 4px 0 10px;
  padding-left: 16px;
  line-height: 1.6;
}
#panel .bank-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
#panel .bank-tools input {
  font-size: 12px;
  padding: 9px 11px;
}
#panel .bank-tabs button {
  font-size: 10px;
}
#panel .dialogue {
  margin: 0 0 14px;
}
#panel .dialogue-line {
  font: 400 13px / 1.5 var(--ui-font);
  color: var(--ui-text);
  margin: 0 0 8px;
}
#panel .dialogue-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#panel .wiki-list {
  margin: 4px 0 10px;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.7;
}
#panel .wiki-list small {
  margin-left: 4px;
}
#panel .wiki-links {
  font-size: 12px;
  line-height: 2;
}
#panel .wiki-title {
  font: 700 16px / 1.3 var(--ui-font);
  margin: 6px 0 4px;
}
/* 2.12 The HUD minimap: a round live map under the settings button. */
#minimap {
  border: 2px solid #e7d39e8a;
  padding: 0;
  cursor: pointer;
  z-index: var(--z-hud-low, 3);
}
.equipment > button {
  color: inherit;
  text-align: left;
  width: 100%;
}
/* RS3's interface window, docked bottom-right: the tab row is always there; a tab's contents open above it. Not modal. */
#interface {
  position: fixed;
  z-index: var(--z-hud, 4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: var(--iface-w);
  pointer-events: none;
}
#interface > * {
  pointer-events: auto;
}
#iface-tabs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 4px;
  border-radius: 10px;
}
#iface-tabs button {
  position: relative;
  height: var(--ui-tap, 44px);
  background: transparent;
  color: var(--cream);
  border-radius: 7px;
  display: grid;
  place-items: center;
  padding: 0;
}
#iface-tabs .iface-tab-label {
  display: none;
}
#iface-tabs button svg {
  width: 20px;
  height: 20px;
}
/* The Backpack tab's spaces used (interface.js packBadge); red FULL at capacity, and a shake when a full pack refuses. */
#iface-tabs .pack-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: #1d2a21e6;
  border: 1px solid #ebebd040;
  color: var(--cream);
  font: 700 10px/13px system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
  pointer-events: none;
}
#iface-tabs .pack-full .pack-count {
  background: #b5372c;
  border-color: #ffb3a6;
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.02em;
}
#iface-tabs .pack-bump .pack-count {
  animation: pack-bump 0.6s ease-out;
}
@keyframes pack-bump {
  0%, 100% { transform: none; }
  20% { transform: scale(1.35) translateX(-2px); }
  40% { transform: scale(1.35) translateX(2px); }
  60% { transform: scale(1.2) translateX(-1px); }
}
#iface-tabs button.active {
  color: var(--ui-select);
}
/* The window grows to the open tab's content (the title left and X right above it), capped by the screen; only past
   the cap does the content scroll inside. */
#iface-body {
  border-radius: var(--ui-radius-win);
  max-height: calc(100dvh - 190px);
  display: flex;
  flex-direction: column;
  color: var(--ui-text);
}
#iface-head h2 {
  margin: 0;
  font: 700 16px / 1.2 var(--ui-font);
  letter-spacing: 0.2px;
  color: var(--ui-title);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
#iface-head .close-button {
  position: static;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-right: -4px;
  background: transparent;
  color: var(--ui-muted);
}
.pack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 4px;
}
.pack-cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell-raised);
  border: 1px solid var(--ui-line);
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ui-text);
}
.pack-cell.empty {
  background: var(--ui-cell);
}
/* Item the player cannot use yet (level too low): red inset border, warning only. */
.req-unmet {
  border-color: var(--ui-danger) !important;
  box-shadow: inset 0 0 0 1px var(--ui-danger);
}
/* The one hover tip (ui/itemtip.js): items, titles, skills, prayers, the world's mouseover text. Beside the cursor,
   compact, never intercepts the pointer. */
#item-tip {
  position: fixed;
  z-index: var(--z-tip, 61);
  max-width: 220px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 8px;
  background: #0d1512;
  color: var(--ui-text);
  border: 1px solid var(--ui-trim);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-frame);
  font: 400 11px/1.35 var(--ui-font);
}
#item-tip[hidden] { display: none; }
#item-tip b { color: var(--ui-title); font-size: 12px; }
#item-tip small { color: var(--ui-muted); }
#item-tip .tip-req.ok { color: var(--ui-good); }
#item-tip .tip-req.bad { color: var(--ui-bad); font-weight: 600; }
button.pack-cell:hover {
  background: var(--ui-cell-hover);
}
.pack-cell svg {
  width: 60%;
  height: 60%;
}
.pack-cell .item-thumb {
  width: 38px;
  height: 38px;
}
.pack-cell .cnt {
  position: absolute;
  left: 4px;
  top: 2px;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
  font-variant-numeric: tabular-nums;
}
.pack-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-muted);
}
.pack-foot span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pack-foot svg {
  width: 14px;
  height: 14px;
}
.contrast #iface-tabs {
  background: var(--ui-win);
}
/* Worn Equipment: RS3's paper doll (only the Grove's slots), the tool row beneath. */
.doll {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  /* Head, body, legs and feet down the middle (the legs slot fills a corner the old doll left empty, no extra row). */
  grid-template-areas:
    "back head neck"
    "weapon body shield"
    "hands legs ring"
    ". feet ammo"
    "tools tools tools";
  gap: 8px 14px;
  justify-content: center;
  padding: 6px 0 10px;
}
.doll-tools-label {
  color: var(--ui-muted);
  font: 600 12px / 1.3 var(--ui-font);
  margin-top: 4px;
}
.doll-details {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.doll-slot {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell-raised);
  border: 1px solid var(--ui-line);
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ui-text);
}
.doll-slot svg {
  width: 34px;
  height: 34px;
}
.doll-slot .item-thumb {
  width: 42px;
  height: 42px;
}
.doll-slot.empty {
  background: var(--ui-cell);
}
.doll-slot.empty svg {
  opacity: 0.18;
}
button.doll-slot:hover {
  background: var(--ui-cell-hover);
}
.doll-slot .cnt {
  position: absolute;
  left: 4px;
  top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #ffff00;
  text-shadow: 1px 1px 0 #000;
}
.doll-slot[style*="grid-area:axe"],
.doll-slot[style*="grid-area:pick"],
.doll-slot[style*="grid-area:rod"] {
  margin-top: 0;
}
.doll-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  font-size: var(--ui-2xs, 11px);
  color: var(--ui-muted);
  border-top: 1px solid var(--ui-line);
  padding-top: 7px;
}
.doll-stats b {
  color: var(--ui-text);
}
.stat-cell:hover {
  background: var(--ui-cell-hover);
}
.quest-links {
  display: grid;
  gap: 4px;
}
/* ---------- RS3 HUD placement (the "html body" prefix outranks the older per-element and body.art rules) ---------- */
html body.playing #header {
  display: none;
}
/* Top-right: the minimap with the compass on its rim, the World map, Lodestones and Settings orbs round its left side,
   and the connection pill and save flash beneath. Positions are on circles about the minimap's centre. */
html body #map-cluster {
  position: fixed;
  width: 196px;
  height: auto;
  /* The corner toggle keeps its own row above the ring; Guide and status flow beneath the map. */
  padding-top: calc(186px + var(--map-toggle-space));
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  z-index: var(--z-hud-low, 3);
  pointer-events: none;
}
/* Only the controls take the pointer, so a camera drag can start in the empty space around them. */
#map-cluster :is(button, canvas, #connection) {
  pointer-events: auto;
}
html body #minimap {
  position: absolute;
  top: calc(18px + var(--map-toggle-space));
  right: 0;
  width: 140px;
  height: 140px;
}
html body #compass {
  position: absolute;
  left: 74px;
  top: calc(10px + var(--map-toggle-space));
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
}
.orb {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
}
.orb svg {
  width: 18px;
  height: 18px;
}
#orb-map {
  left: 23px;
  top: calc(30px + var(--map-toggle-space));
}
#settings.orb {
  left: 41px;
  top: calc(136px + var(--map-toggle-space));
}
/* One row under the map: an events chip and Players side by side, the row reaching left past the ring rather than
   wrapping into a second line the interface window would have to clear. */
.cluster-status {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
html body .cluster-status #saved {
  position: static;
}
/* Top-left: the XP tracker, then the tutorial/quest tracker. */
html body #trackers {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 248px;
  z-index: var(--z-hud-low, 3);
  pointer-events: none;
}
html body #trackers > * {
  position: static;
  width: auto;
  pointer-events: auto;
}
/* Bottom-centre: the action bar, between the chat box and the interface window. */
html body #action-bar {
  position: fixed;
  left: calc(28px + clamp(220px, 30vw, 420px));
  right: calc(max(16px, env(safe-area-inset-right)) + 284px);
  width: fit-content;
  max-width: calc(100vw - 32px);
  margin-inline: auto;
  z-index: var(--z-hud, 4);
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp {
  position: relative;
  height: 24px;
  border-radius: 8px;
  overflow: hidden;
}
.lp span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  font-variant-numeric: tabular-nums;
}
.lp svg {
  width: 11px;
  height: 11px;
}
.bar-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.bar-slot {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
}
.bar-slot svg {
  width: 26px;
  height: 26px;
}
.bar-slot .item-thumb {
  width: 32px;
  height: 32px;
}
.bar-slot .cnt {
  position: absolute;
  left: 4px;
  top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #ffff00;
  text-shadow: 1px 1px 0 #000;
}
/* A short word under the icon (the first fight's slots); the key moves up out of its way. */
.bar-slot .bar-word {
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 2px;
  font: 700 9px/1 system-ui, sans-serif;
  text-align: center;
  color: #f3e6bd;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  white-space: nowrap;
}
/* The key moves to the top only where a word is actually shown under the icon (most slots' words are hidden below). */
.bar-slot.worded:is(.skill-tap, .hearth-slot) kbd {
  top: 3px;
  bottom: auto;
}
.bar-slot .cool {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #000a;
  font-size: 15px;
  font-weight: 700;
}
/* Adrenaline (stage 3): 0-100 under the life points, a notch at the threshold need; the slot's kind is its frame
   (basic plain, threshold gold edge, ultimate gold fill) and its need is written on it, so colour is never the only cue. */
.adr {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: #2b2614;
  overflow: hidden;
}
.adr i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(#f4cf55, #b8871d);
  transition: width 0.25s;
}
.adr.full i {
  background: linear-gradient(#ffe887, #e0a92a);
}
.adr b {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(#fffc 0 4px, transparent 4px calc(100% - 4px), #fffc calc(100% - 4px));
}
.adr span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  font-variant-numeric: tabular-nums;
}
.adr svg {
  width: 10px;
  height: 10px;
}
.bar-slot.ab-threshold {
  border-color: #d9b04a;
  box-shadow: inset 0 0 0 1px #d9b04a55;
}
.bar-slot.ab-ultimate {
  border: 2px solid #f2c94c;
  background: #f2c94c26;
}
.bar-slot.ab-basic.off,
.bar-slot.ab-threshold.off,
.bar-slot.ab-ultimate.off {
  filter: saturate(0.35);
}
.bar-slot.ab-basic.on,
.bar-slot.ab-threshold.on,
.bar-slot.ab-ultimate.on {
  outline: 2px solid #fff3b0;
  outline-offset: 1px;
}
.bar-slot .need {
  position: absolute;
  left: 3px;
  top: 2px;
  font-size: 10px;
  font-weight: 800;
  color: #ffe08a;
  text-shadow: 1px 1px 0 #000;
}
/* Skill ideas 2: the fight bar (ui/fightbar.js). One fixed row, Attack | large Block | Eat | pinned Ability, that never
   moves or scrolls (it fits 320 px); a header with one incoming instruction, adrenaline and two thin strips (Focus,
   next blow); a tray above the row for the other abilities, prayers, stance and Retreat. Shape and words carry every cue. */
html body #action-bar .fight-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 300px;
  max-width: 100%;
  min-width: 0;
}
#action-bar .fight-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
}
#action-bar .fight-call {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--ui-cell);
  font: 700 12px/1.3 system-ui, sans-serif;
  color: var(--ui-title);
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#action-bar .fight-call.warn {
  color: #fff;
  font-size: 13px;
  background: color-mix(in srgb, var(--move, #e0523a) 48%, rgba(0, 0, 0, 0.7));
  box-shadow: inset 0 0 0 1px var(--move, #e0523a);
}
#action-bar .fight-call.warn::before {
  content: '⛨ ';
}
#action-bar .fight-call.warn.step::before {
  content: '⇥ ';
}
#action-bar .fight-stamp {
  flex: none;
  padding: 2px 6px;
  border-radius: 5px;
  background: #3d5a2a;
  box-shadow: inset 0 0 0 1px #a6d66a88;
  font: 800 10px/1.3 system-ui, sans-serif;
  color: #e9ffd0;
  white-space: nowrap;
}
html body #action-bar .fight-more {
  flex: none;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 6px;
  font: 700 11px/1 system-ui, sans-serif;
  white-space: nowrap;
}
#action-bar .fight-more.on {
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}
#action-bar .fight-strips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 4px;
}
#action-bar .fight-strip {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: #1c1a13;
  overflow: hidden;
}
html body #action-bar .bar-slots.fight-row {
  display: grid;
  grid-template-columns: 48px 76px 48px 48px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 10px 0 2px;
  background: none;
}
html body #action-bar .fight-row > .bar-slot {
  width: 48px;
  height: 48px;
  justify-self: center;
}
html body #action-bar .fight-row > .fight-block {
  width: 76px;
  height: 58px;
  border-width: 2px;
}
html body #action-bar .fight-row > .fight-block .ui-art {
  width: 34px;
  height: 34px;
}
#action-bar .fight-block.warn {
  border-color: #e9b949;
}
#action-bar .block-cd {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--cd, 0) * 100%);
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
#action-bar .block-count {
  position: absolute;
  left: 5px; /* the key label sits top right */
  top: 3px;
  font: 800 11px/1 system-ui, sans-serif;
  color: #ffe08a;
  text-shadow: 1px 1px 0 #000;
}
#action-bar .fight-eat .bite-pip {
  position: absolute;
  left: 50%;
  top: -11px;
  transform: translateX(-50%);
  padding: 2px 4px;
  border-radius: 4px;
  background: #2f6b34;
  box-shadow: inset 0 0 0 1px #9fdc8a;
  font: 800 8px/1 system-ui, sans-serif;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}
#action-bar .fight-eat .bite-pip[hidden] {
  display: none;
}
#action-bar .fight-tray {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px var(--ui-line);
}
#action-bar .fight-tray-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
html body #action-bar .pin-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 2px 8px;
  border-radius: 6px;
  font: 700 11px/1.1 system-ui, sans-serif;
}
#action-bar .pin-slot :is(svg, .ui-art, .item-thumb) {
  width: 20px;
  height: 20px;
  flex: none;
}
#action-bar .pin-slot.on {
  outline: 2px solid #fff3b0;
  outline-offset: 1px;
}
#action-bar .pin-slot.off {
  filter: saturate(0.35);
}
#action-bar .pin-slot kbd {
  font-size: 9px;
}
#action-bar .pin-slot em {
  font-style: normal;
  font-size: 10px;
  color: #ffe08a;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body #action-bar .fight-bar {
    width: auto;
  }
  html body #action-bar .bar-slots.fight-row {
    grid-template-columns: minmax(44px, 1fr) minmax(64px, 1.5fr) minmax(44px, 1fr) minmax(44px, 1fr);
    gap: 6px;
    padding: 12px 0 2px;
  }
  html body #action-bar .fight-row > .fight-block {
    width: 64px;
    height: 64px;
  }
  /* The round Block: the blow count sits inside the circle, above the shield. */
  #action-bar .block-count {
    left: 50%;
    top: 7px;
    transform: translateX(-50%);
  }
  #action-bar .pin-slot {
    min-height: 44px;
  }
}
/* The narrowest phones keep the whole instruction: the tray button shrinks to its arrow (it keeps its name for readers). */
@media (max-width: 359px) {
  #action-bar .fight-more-word {
    display: none;
  }
  html body #action-bar .fight-more {
    min-width: 32px;
  }
}
/* The work card (progress and Stop) and selection cards sit above the action bar. */
html body #context {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: calc(110px + var(--safe-bottom));
  width: 260px;
  max-height: calc(100dvh - 330px);
}
.health-bar.foe i {
  background: #c8463e;
}
/* Bottom-left: the chat box, always showing its lines on a desktop; the Game tab replaces the floating messages. */
html body #chat {
  width: clamp(220px, 30vw, 420px);
}
/* NPC dialogue: RS3's box over the chat area. */
#dialogue-box {
  position: fixed;
  width: clamp(260px, 30vw, 420px);
  max-height: calc(100dvh - 260px);
  overflow-y: auto;
  z-index: var(--z-dialogue, 6);
}
#dialogue-box header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
#dialogue-box .dialogue-choices,
#dialogue-box .talk-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Service windows open centred with the scrim behind them; the world map opens full-screen. */
.contrast #action-bar,
.contrast #compass,
.contrast .orb {
  background: #10201a;
}
/* Phone (RS3 mobile): a smaller minimap with the compass on its rim; the interface opens from a bottom-right stack of
   round buttons as an overlay; the action bar is compact; chat folds to its button. */
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body #map-cluster {
    width: 150px;
    padding-top: calc(144px + var(--map-toggle-space));
  }
  html body #minimap {
    top: calc(16px + var(--map-toggle-space));
    width: 96px;
    height: 96px;
  }
  html body #compass {
    left: 68px;
    top: calc(7px + var(--map-toggle-space));
    width: 30px;
    height: 30px;
  }
  html body #trackers {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    width: min(200px, calc(100vw - 180px));
  }
  html body #context {
    left: 66px;
    right: 72px;
    transform: none;
    width: auto;
    bottom: calc(78px + var(--safe-bottom));
  }
  html body #chat {
    left: max(10px, env(safe-area-inset-left));
    bottom: calc(8px + var(--safe-bottom));
    width: min(360px, calc(100vw - 20px));
  }
  html body #game-log {
    display: flex;
    bottom: calc(60px + var(--safe-bottom));
  }
  #dialogue-box {
    left: 8px;
    width: auto;
    bottom: calc(60px + var(--safe-bottom));
    max-height: 55dvh;
  }
  /* The interface: four round buttons stacked bottom-right; More shows the other tabs. The window opens to their left. */
  html body #interface {
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(8px + var(--safe-bottom));
    width: auto;
    flex-direction: row;
    align-items: flex-end;
  }
  #iface-tabs .pack-count {
    top: -3px;
    right: -3px;
  }
}
#iface-tabs [data-iface-more] {
  display: none;
}
/* Short landscape: the phone-sized minimap cluster and a compact bar keep the middle of the screen open. */
@media (max-height: 500px) and (orientation: landscape) {
  html body #minimap {
    width: 96px;
    height: 96px;
    top: calc(16px + var(--map-toggle-space));
  }
  html body #map-cluster {
    width: 150px;
    padding-top: calc(136px + var(--map-toggle-space));
  }
  html body #compass {
    left: 63px;
    top: calc(7px + var(--map-toggle-space));
    width: 30px;
    height: 30px;
  }
  #orb-map {
    left: 24px;
    top: calc(19px + var(--map-toggle-space));
  }
  #settings.orb {
    left: 38px;
    top: calc(96px + var(--map-toggle-space));
  }
  .orb {
    width: 32px;
    height: 32px;
  }
  html body #context {
    bottom: calc(84px + var(--safe-bottom));
    max-height: calc(100dvh - 110px);
  }
  html body #trackers {
    width: 210px;
  }
  #chat-lines {
    max-height: 70px;
  }
}
body.kout-open #map-cluster,
body.kout-open #trackers,
body.kout-open #action-bar,
body.kout-open #dialogue-box,
.protocol-open > #map-cluster,
.protocol-open > #trackers,
.protocol-open > #action-bar,
.protocol-open > #dialogue-box {
  display: none !important;
}
/* A refusal at a Kout table or in Protocol reads above its overlay, never behind it. */
body.kout-open #notice,
body.kout-open #toasts {
  z-index: 28;
}
.protocol-open #notice,
.protocol-open #toasts {
  z-index: 31;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #compass .rose b {
    font-size: 7px;
  }
  #compass .rose::before {
    top: 9px;
  }
  #compass .rose::after {
    bottom: 9px;
  }
  #iface-tabs [data-iface-more] {
    display: grid;
  }
  body.trading #action-bar {
    display: none;
  }
}
/* Bank and shop cells: the banked items or the shelf, then the quantity buttons (RS3's 1 / 5 / 10 / X / All). */
.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 4px;
  margin: 6px 0;
}
.pack-cell .keep-mark {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font: 700 9px/1 system-ui, sans-serif;
  color: var(--gold);
  font-style: normal;
}
.bank-qty {
  display: flex;
  gap: 4px;
  margin: 6px 0;
}
.bank-qty button {
  flex: 1;
}
/* RS3's "Enter amount". */
#amount-prompt {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: var(--z-prompt, 20);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  align-items: center;
}
#amount-prompt label {
  grid-column: 1 / -1;
  font-size: 13px;
}
#amount-prompt input {
  padding: 0 10px;
  font-size: 16px;
}
/* RS3's Make-X: the dish and how many, Space starts. */
#make-x {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-window-2, 11);
  width: min(360px, calc(100vw - 24px));
  max-height: min(78dvh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 185, 120, 0.35) transparent;
}
.make-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 5px;
  margin: 8px 0 4px;
}
.make-name {
  margin: 2px 0 4px;
}
#make-x [data-make-go] {
  margin-top: 4px;
}
.pack-cell.using {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
#iface-content .pack-cell {
  touch-action: none;
}
.pack-cell.dragging {
  opacity: 0.35;
}
.drag-ghost {
  position: fixed;
  z-index: var(--z-drag, 35);
  pointer-events: none;
  opacity: 0.85;
}
/* ---------- The interface family: one look for every window, row and button (the backpack is the reference) ----------
   Tokens are on :root. Scoped by id so the older panel-era rules, written for the cream sheet, stay underneath. */
body.contrast {
  --ui-win: #0f1a16;
  --ui-win-solid: #0f1a16;
  --ui-cell: rgba(0, 0, 0, 0.4);
  --ui-cell-raised: rgba(255, 255, 255, 0.08);
  --ui-line: rgba(235, 235, 208, 0.26);
  --ui-slot-line: rgba(217, 185, 120, 0.3);
  --ui-muted: #d3d9c6;
  --ui-trim: #a07a44;
  --glass: var(--ui-win);
}
#iface-content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--ui-font);
  font-size: var(--ui-s, 14px);
  color: var(--ui-text);
  scrollbar-width: thin;
  scrollbar-color: #ebebd040 transparent;
}
#iface-content::-webkit-scrollbar {
  width: 6px;
}
#iface-content::-webkit-scrollbar-thumb {
  background: #ebebd040;
  border-radius: 3px;
}
/* Type: window title 14 gold; section title 11 gold caps; row title 12 semibold; body 12; small 11 muted. One sans. */
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(h3, h4) {
  font: 600 var(--ui-s, 12px) / 1.35 var(--ui-font);
  color: var(--ui-text);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 6px;
  font: 700 var(--ui-2xs, 11px) / 1.2 var(--ui-font);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-accent);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .section-title:first-child {
  margin-top: 2px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .section-title span {
  color: var(--ui-muted);
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.subtext, p, small, .eyebrow) {
  font-family: var(--ui-font);
  color: var(--ui-muted);
  letter-spacing: 0;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.subtext, p) {
  font-size: var(--ui-2xs, 11px);
  line-height: 1.5;
  margin: 4px 0;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) small {
  font-size: var(--ui-2xs, 11px);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 3px;
}
/* Buttons: primary (gold), secondary (outlined) and the link-row (a full-width dark row: label left, arrow right). */
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.primary, .secondary, .secondary-button, .link-row) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--ui-radius);
  font: 600 var(--ui-s, 12px) / 1.25 var(--ui-font);
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .primary {
  background: var(--ui-accent);
  color: #1e332a;
  border: 1px solid transparent;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.secondary, .secondary-button) {
  background: transparent;
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .link-row {
  width: 100%;
  justify-content: space-between;
  background: var(--ui-cell);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  text-align: left;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.primary, .secondary, .secondary-button, .link-row) svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .link-row svg {
  color: var(--ui-accent);
}
@media (hover: hover) {
  #iface-tabs button:hover {
    background: #ffffff1a;
  }
  :is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .primary:hover:not(:disabled) {
    background: var(--ui-select);
  }
  :is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.secondary, .secondary-button, .link-row):hover:not(:disabled) {
    background: var(--ui-cell-hover);
  }
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) [aria-pressed="true"]:is(.secondary, .secondary-button) {
  border-color: var(--ui-accent);
  color: var(--ui-select);
}
/* Rows: every listed thing (a quest, a pet, a cost, an echo, a record) is a dark inset card with cream text. */
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.skill-row, .shop-row, .recipe, .note, .cost-row, .contributor, .echo-live, .echo-row, .echo-slot, .plan, .empty-state, .record-game, .resident, .setting) {
  display: block;
  margin: 0 0 4px;
  padding: 5px 8px;
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: none;
  color: var(--ui-text);
  font: 400 var(--ui-s, 12px) / 1.4 var(--ui-font);
  text-align: left;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.shop-row, .cost-row, .contributor, .note, .resident, .setting) {
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.shop-row, .cost-row, .contributor) > span {
  flex: 1;
  min-width: 0;
  margin: 0;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.shop-row, .cost-row, .contributor, .resident, .setting) small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.shop-row, .cost-row) .item-thumb,
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.shop-row, .cost-row) > svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.cost-row strong, .contributor small) {
  color: var(--ui-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.shop-row, .recipe, .echo-row, .echo-live, .skill-row) button:not(.link-row, .primary) {
  min-height: 32px;
  padding: 4px 10px;
  border-radius: var(--ui-radius);
  background: transparent;
  border: 1px solid var(--ui-line);
  color: var(--ui-text);
  font: 600 var(--ui-2xs, 11px) / 1.2 var(--ui-font);
  width: auto;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .note {
  align-items: flex-start;
  color: var(--ui-muted);
  font-size: var(--ui-2xs, 11px);
  line-height: 1.45;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .note svg {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  color: var(--ui-accent);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .gap {
  margin-top: 8px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* A skill-shaped row (Quest points, Remembrance): name left, number right, the bar and a muted line beneath. */
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .skill-row h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ui-s, 14px);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .skill-row .skill-art {
  width: 24px;
  height: 24px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .skill-row .level {
  font: 700 var(--ui-num, 14px) / 1 var(--ui-font);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .skill-row small {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.2px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .skill-row .held {
  margin: 6px 0 0;
  color: var(--ui-select);
  font-weight: 600;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .skill-row .link-row {
  margin-top: 6px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .skill-row.elite h3 em {
  font: 600 10px var(--ui-font);
  font-style: normal;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ui-muted);
  background: none;
  border: 0;
  padding: 0;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .bar {
  height: 5px;
  margin-top: 6px;
  background: #0000004d;
  border-radius: 3px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .bar > i {
  background: var(--ui-xp);
}
.quest-links {
  margin: 0 0 4px;
}
/* The quest journal: a status chip, the name, the step and the reward. */
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .recipe h3 {
  margin: 2px 0;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .recipe .eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .recipe :is(.primary, .note) {
  margin: 6px 0 0;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .recipe .note {
  padding: 0;
  background: none;
  border: 0;
}
.chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font: 700 10px / 1.2 var(--ui-font);
  letter-spacing: 0.4px;
  color: var(--ui-text);
  background: #ffffff14;
}
.chip[data-status="ready"] {
  color: #1e332a;
  background: var(--ui-accent);
}
.chip[data-status="active"] {
  color: var(--ui-select);
  background: #d9b97833;
}
.chip[data-status="done"] {
  color: #b9dcb0;
  background: #7fb07a26;
}
/* Echoes. */
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .empty-state {
  text-align: center;
  padding: 16px 12px;
  color: var(--ui-muted);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .empty-state > svg {
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  color: var(--ui-accent);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .empty-state h3 {
  margin-bottom: 4px;
  font-size: var(--ui-num, 14px);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .empty-state + .primary {
  width: 100%;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.echo-live, .echo-row) :is(p, .amount) {
  font-size: var(--ui-2xs, 11px);
  color: var(--ui-muted);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .echo-row .row + .row {
  margin-top: 6px;
  justify-content: flex-start;
  gap: 4px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .echo-slot .echo-row {
  background: #0000001f;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .echo-others {
  gap: 4px;
}
/* Commons. */
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .pavilion-art {
  height: 110px;
  margin-bottom: 8px;
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .stage-dots {
  margin: 4px 0 8px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .stage-dots span {
  background: #ffffff1c;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .stage-dots span.done {
  background: var(--ui-xp);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .project-title {
  margin: 0 0 6px;
  font: 600 var(--ui-num, 14px) / 1.3 var(--ui-font);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .vote-grid {
  gap: 4px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .vote-grid button {
  min-height: 40px;
  padding: 4px;
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  font: 600 var(--ui-2xs, 11px) / 1.25 var(--ui-font);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .vote-grid button.selected {
  border-color: var(--ui-accent);
  background: #d9b97826;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .vote-grid small {
  margin-top: 3px;
  color: var(--ui-muted);
  opacity: 1;
}
/* Games: the lifetime records. */
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-owner {
  margin: 0 0 8px;
  font: 600 var(--ui-num, 14px) / 1.3 var(--ui-font);
  color: var(--ui-text);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-owner span {
  margin-top: 2px;
  font: 400 var(--ui-2xs, 11px) var(--ui-font);
  color: var(--ui-muted);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-game + .record-game {
  padding-top: 8px;
  border-top: 1px solid var(--ui-line);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-game h3 {
  margin: 0 0 6px;
  font: 700 var(--ui-2xs, 11px) / 1.2 var(--ui-font);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-accent);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-score {
  margin-bottom: 6px;
  gap: 8px;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-score > strong {
  font: 700 var(--ui-num, 14px) var(--ui-font);
  color: var(--ui-text);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.record-score small, .record-score > span) {
  font: 400 var(--ui-2xs, 11px) var(--ui-font);
  color: var(--ui-muted);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-ledger {
  font-size: var(--ui-s, 12px);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-ledger > div {
  padding: 4px 0;
  border-bottom: 1px solid var(--ui-line);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-ledger > div:last-child {
  border-bottom: 0;
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-ledger dt {
  color: var(--ui-muted);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-honours li {
  padding: 3px 8px;
  border-color: #d9b97866;
  color: var(--ui-select);
  font-size: var(--ui-2xs, 11px);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-ranks button {
  min-height: 44px;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) :is(.record-rank, .record-ranks strong) {
  font: 700 var(--ui-num, 14px) var(--ui-font);
  color: var(--ui-accent);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-name {
  font-size: var(--ui-s, 12px);
}
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .record-ranks small {
  margin-top: 2px;
  font-size: 10px;
  color: var(--ui-muted);
}
/* ---------- Phase 3: every small surface in the family: menu, tooltips, prompts, Make-X, dialogue, Info, HUD ---------- */
#world-menu {
  background: var(--ui-win);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  font-family: var(--ui-font);
  backdrop-filter: blur(14px);
}
#world-menu {
  position: fixed;
  z-index: var(--z-popup, 60);
  min-width: 170px;
  max-width: min(300px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--ui-radius-win);
  padding: 6px;
}
#world-menu button {
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  font-size: var(--ui-s, 12px);
}
#world-menu button:hover,
#world-menu button:focus-visible {
  background: var(--ui-cell-hover);
}
#world-menu button:last-child,
.opt-more {
  color: var(--ui-muted);
}
#world-menu .menu-head {
  color: var(--ui-accent);
  font-size: var(--ui-2xs, 11px);
  border-bottom-color: var(--ui-line);
}
:is(#item-tip, #kb-tip, #world-menu) small {
  font-size: 10px;
  color: var(--ui-muted);
  opacity: 1;
}
/* The three small windows share one padding and radius: the amount prompt, Make-X and the option menu's frame. */
#amount-prompt,
#make-x {
  padding: 10px 12px 12px;
  border-radius: var(--ui-radius-win);
  color: var(--ui-text);
  font-family: var(--ui-font);
}
#amount-prompt input,
#panel .bank-tools input,
#chat-input {
  font-family: var(--ui-font);
}
#amount-prompt input,
#panel .bank-tools input,
#panel #account-password {
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  caret-color: var(--ui-select);
  color-scheme: dark;
}
#panel input::placeholder {
  color: var(--ui-muted);
  opacity: 1;
}
#amount-prompt .primary {
  width: auto;
  padding: 0 16px;
  border-radius: var(--ui-radius);
  background: var(--ui-accent);
  color: #1e332a;
  font: 600 var(--ui-s, 12px) var(--ui-font);
  justify-content: center;
}
#make-x header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
#make-x h3 {
  font: 700 var(--ui-num, 14px) / 1.2 var(--ui-font);
}
:is(#make-x, #dialogue-box) header .close-button {
  position: static;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: transparent;
  color: var(--ui-muted);
}
.make-name {
  color: var(--ui-muted);
  font-size: var(--ui-s, 12px);
}
.make-picks .pack-cell.on {
  outline: 2px solid var(--gold);
  outline-color: var(--ui-select);
}
:is(#make-x, #panel) .bank-qty button {
  min-height: 36px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  color: var(--ui-text);
  font: 600 var(--ui-s, 12px) var(--ui-font);
}
:is(#make-x, #panel) .bank-qty button.on {
  background: #d9b97833;
  border-color: var(--ui-accent);
  color: var(--ui-select);
}
#make-x [data-make-go] {
  width: 100%;
  min-height: 40px;
}
/* NPC dialogue: the dark box over the chat, the speaker's name, the line, the choices as rows. */
html body #dialogue-box {
  background: var(--ui-win);
  color: var(--ui-text);
  border-radius: var(--ui-radius-win);
  font-family: var(--ui-font);
}
#dialogue-box .dialogue-line {
  font: 400 13px / 1.5 var(--ui-font);
  color: var(--ui-text);
  margin: 0 0 8px;
}
#dialogue-box .dialogue-choices {
  gap: 4px;
}
#dialogue-box .dialogue-choices :is(.secondary, .text-button) {
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  background: var(--ui-cell);
  text-align: left;
}
#dialogue-box .text-button {
  color: var(--ui-muted);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 6px 12px;
  font: 600 var(--ui-s, 12px) var(--ui-font);
}
/* The item Info card. */
#item-info {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-window-3, 12);
  width: min(360px, calc(100vw - 32px));
  max-height: min(78dvh, 640px);
  overflow-y: auto;
  background: var(--ui-win);
  color: var(--ui-text);
  border-radius: var(--ui-radius-win);
  padding: 12px;
  font-family: var(--ui-font);
  backdrop-filter: blur(14px);
}
#item-info .close-button {
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  background: transparent;
  color: var(--ui-muted);
}
#item-info .item-detail {
  padding: 10px 40px 10px 10px;
  margin: 0 0 8px;
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
}
#item-info .item-detail h3 {
  margin: 6px 0 2px;
  font-size: var(--ui-num, 14px);
}
#item-info ul {
  color: var(--ui-muted);
  font-size: var(--ui-2xs, 11px);
}
#item-info > .secondary {
  width: 100%;
}
/* The action bar and the orbs: cells like the backpack's. */
.bar-slot {
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  color: var(--ui-text);
}
.bar-slot:hover {
  background: var(--ui-cell-hover);
}
.bar-slot kbd {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font: 700 9px/1 system-ui, sans-serif;
  color: var(--ui-muted);
}
.lp {
  background: #3a1d1a;
}
.lp i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ui-danger);
}
html body #compass,
.orb {
  background: var(--ui-win);
  border: 1px solid var(--ui-line);
  color: var(--ui-text);
}
/* The work and selection card. */
#context {
  font-family: var(--ui-font);
  border-radius: var(--ui-radius-win);
}
body.art #context h3,
#context h3 {
  margin: 4px 0 2px;
  font: 600 var(--ui-num, 14px) / 1.3 var(--ui-font);
  color: var(--ui-text);
}
body.art #context .eyebrow,
#context .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--ui-accent);
}
body.art #context p,
#context p,
#context .small-row {
  color: var(--ui-muted);
}
#context button {
  border-radius: var(--ui-radius);
  background: var(--ui-accent);
  color: #1e332a;
  font-family: var(--ui-font);
}
#context button.secondary {
  background: transparent;
  border: 1px solid var(--ui-line);
  color: var(--ui-text);
}
#context .progress i {
  background: var(--ui-xp);
}
#chat-person {
  width: 280px;
  max-height: calc(100dvh - 160px);
  overflow: auto;
  touch-action: pan-y;
  font-family: var(--ui-font);
}
#chat-person h3 {
  font: 600 var(--ui-num, 14px) / 1.3 var(--ui-font);
  color: var(--ui-text);
}
#chat-person p {
  color: var(--ui-muted);
}
/* Toasts. */
.toast {
  background: var(--ui-win);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 8px 14px;
  font: 500 var(--ui-s, 12px) / 1.45 var(--ui-font);
  backdrop-filter: blur(14px);
}
.toast.error {
  background: var(--ui-win);
  color: #f3c2b6;
  border-color: #c8463e99;
}
/* The trade sheet. */
#trade-sheet {
  color: var(--ui-text);
  border-bottom: 0;
  font-family: var(--ui-font);
  backdrop-filter: blur(14px);
}
#trade-sheet header,
#trade-sheet footer {
  border-color: var(--ui-line);
}
#trade-sheet h2 {
  font: 700 var(--ui-num, 14px) / 1.3 var(--ui-font);
  white-space: normal;
  overflow-wrap: anywhere;
}
#trade-sheet h2 .tplace,
.tempty,
.tstatus {
  color: var(--ui-muted);
}
.tstatus .ok {
  color: #b9dcb0;
}
.tstatus .tafter.over {
  color: #f3a493;
}
#trade-sheet .close-button {
  background: transparent;
  color: var(--ui-muted);
}
#trade-sheet #trade-accept {
  width: 100%;
  min-height: 44px;
}
.trow.theirs {
  background: #0000001f;
}
/* ---------- Phase 4: the service windows (#panel) are the same dark window: title left, X right, content scrolls ---------- */
#panel {
  color: var(--ui-text);
  border-radius: var(--ui-radius-win);
  font-family: var(--ui-font);
  backdrop-filter: blur(14px);
}
#panel-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 46px;
  padding: 10px 52px 8px 14px;
  border-bottom: 1px solid var(--ui-line);
}
#panel-heading h2 {
  gap: 8px;
  font: 700 16px / 1.3 var(--ui-font);
}
#panel-heading h2 svg {
  width: 18px;
  height: 18px;
  color: var(--ui-accent);
}
#panel-heading h2 .avatar-portrait,
#panel-heading h2 .portrait,
body.art.avatar2 #panel-title .avatar-portrait {
  width: 28px;
  height: 28px;
  margin-right: 0;
}
#panel-heading p {
  margin: 0;
  max-width: none;
  font-size: var(--ui-2xs, 11px);
  line-height: 1.45;
  color: var(--ui-muted);
}
#panel-heading .eyebrow {
  margin: 0;
  font-size: 10px;
  color: var(--ui-muted);
}
#panel-heading .close-button,
#panel > .close-button {
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--ui-muted);
}
#panel-tabs {
  padding: 8px 14px 0;
}
/* Small tab rows (bank tabs, the wiki, achievements, hiscores): the interface tab look. */
:is(#panel, #panel-tabs) .bank-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
}
:is(#panel, #panel-tabs) .bank-tabs button,
#panel-tabs button {
  width: auto;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--ui-radius);
  background: transparent;
  border: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font: 600 12px / 1.3 var(--ui-font);
  justify-content: center;
}
:is(#panel, #panel-tabs) .bank-tabs button:is(.primary, [aria-pressed="true"], .active),
#panel-tabs button:is(.primary, [aria-pressed="true"], .active) {
  background: #d9b97833;
  border-color: var(--ui-accent);
  color: var(--ui-select);
}
#panel .pack-grid,
#panel .stock-grid {
  padding: 0;
  background: none;
}
#panel .stock-grid {
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
}
/* Item tiles (collection log, return summary): backpack cells with a caption. */
#panel .item-grid {
  gap: 4px;
}
#panel .item {
  min-height: 64px;
  background: var(--ui-cell-raised);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
}
#panel .item .item-name {
  font-size: 10px;
}
#panel .item .item-count {
  background: #00000066;
  color: var(--ui-text);
}
#panel .item.empty {
  background: var(--ui-cell);
}
/* Recipes (forge, kitchen, loom): icon, name and cost, then the buttons, in one card. */
:is(#iface-content, #panel) .recipe:not(.quest-card) {
  display: flex;
  align-items: center;
  gap: 8px;
}
#panel .recipe-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell-raised);
}
#panel .recipe h3 {
  margin: 0 0 2px;
}
#panel .recipe :is(p, .xp) {
  font-size: 10px;
  margin: 0;
  color: var(--ui-muted);
}
#panel .recipe.locked h3,
#panel .missing {
  color: #e3a48f;
}
#panel .recipe button + button {
  margin-top: 4px;
}
:is(#panel, #iface-content) :is(.primary.danger, .danger) {
  color: #f3a493;
}
/* Settings, people, the map and lodestones. */
#panel .setting select {
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  font: 500 var(--ui-2xs, 11px) var(--ui-font);
}
#panel .setting input:is([type="checkbox"], [type="range"]) {
  accent-color: var(--ui-accent);
}
#panel :is(.key-note, .fit-pager, .text-button) {
  color: var(--ui-muted);
}
#panel .text-button {
  font: 600 var(--ui-2xs, 11px) var(--ui-font);
}
#panel .fit-pager button {
  width: auto;
  min-height: 30px;
}
#panel .resident > span:first-child {
  background: var(--ui-cell-raised);
  color: var(--ui-accent);
}
#panel .person-info {
  min-width: 0;
  color: var(--ui-text);
}
#panel .resident {
  flex-wrap: wrap;
}
#panel .resident .person-info {
  flex: 1 1 180px;
  overflow-wrap: anywhere;
}
#panel .resident button {
  background: transparent;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  font: 600 var(--ui-2xs, 11px) var(--ui-font);
}
#panel .map-wrap {
  background: var(--ui-cell);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
}
#panel :is(.wiki-link, .wiki-links button, .wiki-links a) {
  color: var(--ui-select);
}
#panel :is(.wiki-list, .wiki-links) {
  color: var(--ui-text);
}
#panel .wiki-list small {
  color: var(--ui-muted);
}
#panel .keys-help :is(th, td) {
  border-bottom-color: var(--ui-line);
}
#panel .item-detail {
  padding: 10px;
  margin-bottom: 8px;
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
}
#panel .item-detail h3 {
  margin: 6px 0 2px;
  font-size: var(--ui-num, 14px);
}
#panel .item-detail p {
  color: var(--ui-muted);
}
#panel .equipment > :is(div, button) {
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
}
#panel .equipment small {
  color: var(--ui-muted);
}
#panel .equipment svg {
  color: var(--ui-accent);
}
#panel .inventory-footer > div {
  border-color: var(--ui-line);
}
#panel .inventory-footer small {
  color: var(--ui-muted);
}
#panel .inventory-footer strong {
  font: 700 var(--ui-num, 14px) var(--ui-font);
}
#panel .shop-row .qty-open,
#panel .dest-split button {
  color: var(--ui-text);
}
#panel .gap {
  margin-top: 10px;
}
/* One width and one height limit for the centred service windows; the world map stays full-screen. */
@media (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  #panel {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-height: calc(100dvh - 40px);
  }
  html body #panel[data-kind="map"] {
    inset: 16px;
    width: auto;
    transform: none;
    max-height: none;
  }
  html body #panel:not([data-kind="map"]) {
    width: 400px;
    max-height: min(680px, calc(100dvh - 48px));
  }
}
/* ---------- Phase 5: one outer margin for every HUD block (16 desktop, 10 phone), one size for round controls ---------- */
:root {
  --saffron: #e8a33a;
  --hud-m: 16px;
}
html body #map-cluster {
  top: calc(max(calc(var(--hud-m) - 10px), env(safe-area-inset-top)) / var(--ui-scale, 1));
  right: calc(max(var(--hud-m), env(safe-area-inset-right)) / var(--ui-scale, 1));
}
html body #trackers {
  top: max(var(--hud-m), env(safe-area-inset-top));
  left: max(var(--hud-m), env(safe-area-inset-left));
}
html body #chat,
#dialogue-box {
  left: max(var(--hud-m), env(safe-area-inset-left));
  bottom: calc(var(--hud-m) + var(--safe-bottom));
}
html body #action-bar {
  bottom: calc(var(--hud-m) + var(--safe-bottom));
}
html body #interface {
  right: max(var(--hud-m), env(safe-area-inset-right));
  bottom: calc(var(--hud-m) + var(--safe-bottom));
}
/* The window stays the same size on every tab, and below the minimap cluster when the screen is short. */
/* Narrow desktop: the chat folds to its button (chat.js), so the action bar centres between it and the interface. */
@media (min-width: 701px) and (max-width: 1000px), (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  html body #game-log {
    display: flex;
    bottom: calc(76px + var(--safe-bottom));
  }
  html body #chat {
    width: min(360px, calc(100vw - var(--iface-w) - 3 * var(--hud-m)));
  }
  /* The bar is zoomed by Interface size and the chat button and window are not: its offsets are divided back. */
  html body #action-bar {
    left: calc((var(--hud-m) + 60px) / var(--ui-scale, 1));
    right: calc((var(--hud-m) + var(--iface-w) + var(--hud-m)) / var(--ui-scale, 1));
  }
  body.chat-open #action-bar {
    visibility: hidden;
  }
}
/* Small landscape keeps the same bottom anchor; narrow bars wrap between chat and the tab row. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 760px) {
  html body #action-bar {
    --skill-bar-width: auto;
    width: auto;
    padding-right: 30px;
  }
  html body #action-bar .bar-slots {
    min-width: 0;
  }
  html body #action-bar.skilling {
    padding-right: 8px;
  }
  /* The phone's shape on its side: the track across, the small slots on the left, the Space button on the right. */
  html body #action-bar .skill-work {
    grid-template-columns: minmax(0, 1fr) minmax(84px, 42%);
  }
  html body #action-bar .skill-work > .skill-meters {
    display: contents;
  }
  html body #action-bar .skill-work > .skill-meters > .zone-track {
    grid-column: 1 / -1;
  }
  html body #action-bar .skill-work > .skill-meters > :is(.skill-ctxs, .station-slots, .hearth-slots) {
    grid-column: 1;
    align-self: center;
  }
  html body #action-bar .skill-work > .skill-meters > .skill-ctxs:not(.specimens) {
    flex-direction: column;
  }
  html body #action-bar .skill-work > .skill-tap {
    grid-column: 2;
    justify-self: stretch;
    width: auto;
    margin: 0;
  }
  html body #action-bar .skill-head {
    flex-wrap: wrap;
  }
  html body #game-log,
  html body.art #game-log {
    bottom: calc(104px + var(--safe-bottom));
  }
}
/* Short landscape: the window takes the right column under nothing; the minimap steps aside while it is open. */
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #panel {
    border-radius: var(--ui-radius-win) var(--ui-radius-win) 0 0;
    border-bottom: 0;
  }
  :root {
    --hud-m: 10px;
  }
  html body #map-cluster {
    top: calc(max(3px, env(safe-area-inset-top)) / var(--ui-scale, 1));
  }
  #dialogue-box {
    right: var(--hud-m);
  }
  /* Round tab buttons, orbs and action-bar slots: one 44 px round control. Orbs sit on a circle about the minimap. */
  #iface-tabs {
    order: 2;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    position: relative;
    grid-template-columns: 44px;
  }
  /* More opens a labelled column to the left; the four primary targets stay in place. */
  #iface-tabs button:is([data-iface="quests"], [data-iface="echoes"], [data-iface="commons"], [data-iface="log"]) {
    display: none;
    position: absolute;
    right: 52px;
    width: min(160px, calc(100vw - 76px));
    height: 44px;
    padding: 0 10px;
    border-radius: var(--ui-radius);
    justify-content: flex-start;
    gap: 10px;
  }
  #interface.more #iface-tabs button:is([data-iface="quests"], [data-iface="echoes"], [data-iface="commons"], [data-iface="log"]) {
    display: flex;
  }
  #iface-tabs button[data-iface="quests"] { bottom: 150px; }
  #iface-tabs button[data-iface="echoes"] { bottom: 100px; }
  #iface-tabs button[data-iface="commons"] { bottom: 50px; }
  #iface-tabs button[data-iface="log"] { bottom: 0; }
  #interface.more #iface-tabs :is([data-iface="quests"], [data-iface="echoes"], [data-iface="commons"], [data-iface="log"]) .iface-tab-label {
    display: block;
    font: 600 12px / 1.3 var(--ui-font);
  }
  #iface-tabs [data-iface-more] .iface-tab-label {
    display: block;
    font: 600 12px / 1 var(--ui-font);
  }
  #iface-tabs [data-iface-more] {
    gap: 0;
    padding: 3px 0;
  }
  html body #iface-tabs [data-iface-more] .ui-art {
    width: 24px;
    height: 24px;
  }
  #iface-tabs button,
  .orb,
  .bar-slot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ui-win);
    border: 1px solid var(--ui-line);
  }
  #iface-tabs button.active {
    background: var(--ui-cell);
    border-color: var(--ui-accent);
    box-shadow: inset 0 0 0 1px var(--ui-accent);
  }
  .orb svg,
  .bar-slot svg {
    width: 20px;
    height: 20px;
  }
  .bar-slot .cool {
    border-radius: 50%;
  }
  #orb-map {
    left: 17px;
    top: var(--map-toggle-space);
  }
  #settings.orb {
    left: 22px;
    top: calc(91px + var(--map-toggle-space));
  }
  #iface-body {
    order: 1;
    margin-bottom: 340px;
    max-height: calc(100dvh - 380px - var(--safe-bottom));
    width: min(236px, calc(100vw - 44px - 6px - 2 * var(--hud-m)));
  }
  html body #iface-content > .pack-grid {
    min-height: 326px;
  }
  /* The open window leaves the bottom action bar available. */
  body.iface-open:not(.chat-open) :is(#chat-log, #game-log),
  body.iface-open #context {
    visibility: hidden;
  }
  body.chat-open #iface-body {
    visibility: hidden;
  }
}

/* Click cross at the cursor (game/features/targeting.js clickMark), red for walks and actions. */
.click-mark {
  position: fixed;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  pointer-events: none;
  z-index: var(--z-mark, 40);
  animation: click-mark 0.45s ease-out forwards;
}
.click-mark::before,
.click-mark::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: #d8432f;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: rotate(45deg);
}
.click-mark::after {
  transform: rotate(-45deg);
}
.click-mark.act::before,
.click-mark.act::after {
  background: #d8432f;
}
@keyframes click-mark {
  from {
    transform: scale(1.25);
    opacity: 1;
  }
  to {
    transform: scale(0.6);
    opacity: 0;
  }
}

/* The compass sits on the minimap's rim, above it (the minimap is layer 3). */
#compass {
  flex: none;
  z-index: 4;
}

/* A pin's disc in HTML (game/features/map.js pinIcon): the categories, the list's rows and the card. */
.map-kind-dot svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* A painted pin (art/map/pins, game/features/map.js pinIcon) covers its dot, rim and all, over the line icon. */
.map-kind-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #fffaf0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
}
.map-kind-dot .map-pin-art {
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: center / cover no-repeat;
}
/* A painting that is not a whole coin (a pin, a ladder) stands whole on its dot's own colour. */
.map-kind-dot .map-pin-art.loose {
  background-color: inherit;
  background-size: contain;
}
/* A ringed painted coin (the place, station, gathering, lair, lodestone and player pins) leaves its dot's colour as a ring. */
.map-kind-dot .map-pin-art.ringed {
  inset: 1.5px;
}
.map-kind-dot .map-pin-art.locked {
  filter: grayscale(1);
}
/* The painted zoom buttons and the arrow back to you (art/map/zoom-*.png, map/pins/map-you.png). */
html body #panel .map-zoom button .wiki-paint {
  width: 30px;
  height: 30px;
}
/* The map zooms and pans by hand (game/features/map.js): no page pinch or scroll over it. */
#town-map {
  touch-action: none;
}
/* Zoom buttons over the map's top-right corner: +, − and back to you. */
html body #panel .map-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
html body #panel .map-zoom button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(80, 99, 72, 0.45);
  background: rgba(251, 248, 236, 0.94);
  color: #2c3f33;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
html body #panel .map-zoom button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The search box over the map and the list (game/features/map.js mapPanelHtml). */
html body #panel .map-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
html body #panel .map-search-icon {
  position: absolute;
  left: 12px;
  display: grid;
  pointer-events: none;
  color: var(--ui-muted, #56694e);
}
html body #panel .map-search-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
/* The painted world map (game/features/map.js): forest round the land, a soft inner vignette like an old map's edge. */
#panel[data-kind="map"] .map-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(84, 62, 34, 0.35), inset 0 0 28px rgba(40, 52, 30, 0.45);
}
/* The map's painted edge (art/map/frame.png): rolled wooden rails with leaves at the corners, over the inner shade. */
html body #panel[data-kind="map"] .map-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 13px solid transparent;
  border-image: url(art/map/frame.png) 40 / 13px stretch;
}
html body #panel .map-zoom {
  z-index: 3;
}
/* A pressed pin's card (game/features/map.js pinCard): its disc, name and line, then Walk, Teleport and Guide. Beside
   the pin on a wide map; along the map's foot on a narrow one. */
html body #panel .map-card {
  position: absolute;
  z-index: 4;
  width: min(300px, calc(100% - 16px));
  padding: 10px;
  border: 1px solid var(--ui-trim, #a07a44);
  border-radius: var(--ui-radius-win, 10px);
  background: var(--ui-win-solid, #17211d);
  color: var(--ui-text, #efe8d6);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
html body #panel .map-card[hidden] {
  display: none;
}
html body #panel .map-card.sheet {
  left: 8px;
  right: 8px;
  bottom: 8px;
  top: auto;
  width: auto;
}
#panel .map-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
#panel .map-card-head .map-kind-dot {
  flex: none;
  width: 34px;
  height: 34px;
  color: #fff;
  font: 700 13px var(--ui-font, sans-serif);
}
#panel .map-card-head .map-kind-dot svg {
  width: 18px;
  height: 18px;
}
#panel .map-card-main {
  flex: 1;
  min-width: 0;
}
#panel .map-card-main b {
  display: block;
  font: 600 14px / 1.25 var(--ui-font, sans-serif);
  color: var(--ui-title, #f0d9a0);
}
#panel .map-card-main small {
  display: block;
  margin-top: 1px;
  font: 400 12px / 1.35 var(--ui-font, sans-serif);
  color: var(--ui-muted, #aeb6a2);
}
html body #panel .map-card-x {
  flex: none;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  margin: -4px -4px 0 0;
  border: 0;
  background: transparent;
  color: var(--ui-muted, #aeb6a2);
}
#panel .map-card-x svg {
  width: 14px;
  height: 14px;
}
#panel .map-card-acts {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
html body #panel .map-card-acts > button {
  flex: 1;
  min-height: 38px;
  margin: 0;
  padding: 0 8px;
}
#panel .map-card-acts svg {
  width: 15px;
  height: 15px;
}
/* People: where each player is now, beside their status; the buttons take their own line under the name. */
.resident-where {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.resident-where svg {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}
html body .resident-row {
  flex-wrap: wrap;
}
html body .resident-row .row-acts {
  width: 100%;
  flex-wrap: wrap;
  padding-left: 48px;
}
.resident-row [data-map-show] svg {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
}
/* ==========================================================================================================
   The Grove interface system (UI lane). One look for every window; tokens are on :root at the top of this file.
   Window: a .win root (the service window #panel, Make-X, the amount prompt, item info, the trade sheet, the
   dialogue box, the option menu) is slate with a 1px bronze trim and a soft inner highlight, a gold title bar
   and an X. Inside: .win-tools (a toolbar row), .win-body (the middle; it or one child is the .scroll-y region),
   .win-foot (actions along the bottom). Nothing else scrolls: a window root and #panel-content never do.
   Parts: .seg (segmented tabs and quantities), .pack-cell (the slot), .slot-grid, .shelf-card (slot + price),
   .win-caption, .win-search, .win-empty, .win-note, .win-hint, .win-strip, .win-pop, .coin-chip, .pill.
   ========================================================================================================== */
#panel,
#make-x,
#amount-prompt,
#item-info,
#trade-sheet,
html body #dialogue-box,
#world-menu {
  border: 1px solid var(--ui-trim);
  box-shadow: var(--ui-frame);
}
#panel,
#make-x,
#amount-prompt,
#trade-sheet {
  background: var(--ui-win);
}
#panel-heading,
#make-x header,
#trade-sheet header {
  background: var(--ui-bar);
}
#panel-heading h2,
#make-x h3,
#trade-sheet h2 {
  color: var(--ui-title);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
#panel-heading .close-button:hover,
#trade-sheet .close-button:hover,
#make-x .close-button:hover {
  color: var(--ui-text);
  background: var(--ui-cell-hover);
}

/* The one scrolling region: thin, contained, never the window itself. */
.scroll-y {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 185, 120, 0.35) transparent;
}
/* Safety net: a scroller nested inside the host scroller must never trap the wheel. */
:is(.panel-scroll, #dialogue-box) .scroll-y {
  overscroll-behavior: auto;
}
.scroll-y::-webkit-scrollbar {
  width: 6px;
}
.scroll-y::-webkit-scrollbar-thumb {
  background: rgba(217, 185, 120, 0.35);
  border-radius: 3px;
}
html body #panel-content {
  padding: 10px 14px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ebebd040 transparent;
  font-size: var(--ui-s, 12px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
#panel-content > * {
  flex-shrink: 0;
}
#panel-content > .panel-scroll {
  flex: 1 1 auto;
  margin: -10px -14px -14px;
  padding: 10px 14px 14px;
}

/* Section captions inside a window (not tabs): small gold caps, a muted count on the right. */
.win-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  background: none;
  border: 0;
  font: 700 10px / 1.2 var(--ui-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ui-accent);
  text-align: left;
  cursor: default;
}
.win-caption > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ui-muted);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.win-caption.fold svg {
  display: none;
  width: 12px;
  height: 12px;
  transition: transform 0.15s;
}

/* Toolbar, body, foot. */
.win-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-bottom: 10px;
}
.win-tools .note {
  margin: 0;
  flex: 1;
}
.win-body {
  flex: 1 1 auto !important;
  min-height: 0;
  display: flex;
  gap: 14px;
}
.win-col {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.win-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px -14px -4px;
  padding: 10px 14px 0;
  border-top: 1px solid var(--ui-line);
}
.win-count {
  margin-left: auto;
  font: 600 11px var(--ui-font);
  color: var(--ui-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.win-note,
.win-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font: 400 11px / 1.4 var(--ui-font);
  color: var(--ui-muted);
}
.win-hint {
  flex: 1;
  margin: 0;
  min-width: 0;
}
.win-hint.bad {
  color: var(--ui-bad);
}
.win-note svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--ui-accent);
}
.win-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 7px 10px;
  border-radius: var(--ui-radius);
  border: 1px solid rgba(224, 168, 74, 0.45);
  background: rgba(224, 168, 74, 0.1);
  color: #f2d6a2;
  font: 500 12px / 1.35 var(--ui-font);
}
.win-strip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.win-strip.quiet {
  border-color: var(--ui-line);
  background: var(--ui-cell);
  color: var(--ui-muted);
}
.win-strip .note {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
/* Empty states: a quiet icon, a line and what to do. */
#panel .win-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 100%;
  padding: 24px 12px;
  text-align: center;
  color: var(--ui-muted);
}
#panel .win-empty > svg {
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  color: var(--ui-muted);
  opacity: 0.7;
}
#panel .win-empty h3 {
  font: 600 13px / 1.3 var(--ui-font);
  color: var(--ui-text);
}
#panel .win-empty p {
  margin: 0;
}
/* A card over a window's foot (Deposit backpack's review): it covers, it does not push. */
.win-pop {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 60px;
  z-index: 2;
  padding: 10px 12px;
  border-radius: var(--ui-radius);
  border: 1px solid rgba(200, 70, 62, 0.6);
  background: #2b1d1a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
#panel .win-pop p {
  margin: 0 0 8px;
  color: #f3c9bd;
  font-size: 12px;
}
#panel .win-pop b {
  color: #ffe3d8;
}
.win-pop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#panel .primary.danger {
  border-color: #c8463e99;
  background: var(--ui-danger);
  color: #fff6ee;
}

/* Search field with a leading magnifier. */
.win-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 220px;
  min-width: 120px;
}
.win-search svg {
  position: absolute;
  left: 9px;
  width: 15px;
  height: 15px;
  color: var(--ui-muted);
  pointer-events: none;
}
#panel .win-search input {
  width: 100%;
  height: 34px;
  padding: 0 8px 0 30px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: var(--ui-cell);
  color: var(--ui-text);
  font: 500 12px var(--ui-font);
  color-scheme: dark;
}
#panel .win-search input:focus {
  outline: none;
  border-color: var(--ui-accent);
}

/* Segmented control: tabs, sides and every quantity row (bank, deposit box, shop, stall, forge, Make-X). */
.seg,
:is(#panel, #make-x) .bank-qty,
#panel .qty {
  display: inline-flex;
  align-items: stretch;
  flex: none;
  gap: 0;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
}
.seg > button,
:is(#panel, #make-x) .bank-qty > button,
#panel .qty > :is(.qty-chip, .qty-x) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ui-muted);
  font: 600 12px / 1 var(--ui-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
:is(#panel, #make-x) .bank-qty > button,
#panel .qty > :is(.qty-chip, .qty-x) {
  flex: 1 1 auto;
}
.seg > button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.seg > button.on,
:is(#panel, #make-x) .bank-qty > button.on,
#panel .qty > :is(.qty-chip, .qty-x).on {
  background: var(--ui-cell-on);
  border-color: rgba(217, 185, 120, 0.7);
  color: var(--ui-select);
}
.seg > button:disabled,
#panel .qty > .qty-chip:disabled {
  opacity: 0.4;
}
#panel .qty-x input {
  height: 24px;
  width: 52px;
  border: 0;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--ui-text);
  font-size: 13px;
}
#panel .qty-x input::placeholder {
  color: var(--ui-muted);
}
.qty-seg > button {
  min-width: 40px;
}

/* Icon toggle and small icon buttons in a toolbar. */
.icon-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: var(--ui-cell);
  color: var(--ui-muted);
}
.icon-toggle svg {
  width: 16px;
  height: 16px;
}
.icon-toggle.on {
  background: var(--ui-cell-on);
  border-color: rgba(217, 185, 120, 0.7);
  color: var(--ui-select);
}

/* The slot: one dark inset square for every item cell (backpack, bank, shelf, exchange, trade). */
#panel .pack-cell,
#iface-content .pack-cell,
#trade-sheet .pack-cell,
#make-x .pack-cell {
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  border: 1px solid var(--ui-slot-line);
}
#panel .pack-cell.empty,
#iface-content .pack-cell.empty,
#trade-sheet .pack-cell.empty {
  background: rgba(0, 0, 0, 0.16);
  border-color: rgba(235, 225, 190, 0.06);
}
:is(#panel, #iface-content, #trade-sheet, #make-x) button.pack-cell:focus-visible {
  outline: 2px solid var(--ui-select);
  outline-offset: -2px;
}
:is(#panel, #trade-sheet) .pack-cell.on {
  border-color: var(--ui-select);
  box-shadow: inset 0 0 0 1px var(--ui-select);
  background: var(--ui-cell-on);
}
:is(#panel, #trade-sheet) .pack-cell:is(.out, .ph) {
  opacity: 1;
}
:is(#panel, #trade-sheet) .pack-cell:is(.out, .ph) > :not(.cnt) {
  opacity: 0.35;
  filter: grayscale(0.6);
}
#panel .pack-cell.out .cnt {
  opacity: 0.6;
}
#panel .pack-cell.ph {
  border-style: dashed;
}
.pack-cell .cnt {
  color: var(--ui-stack);
}
.pack-cell .cnt.k {
  color: var(--ui-stack-k);
}
.pack-cell .cnt.m {
  color: var(--ui-stack-m);
}
/* A kept item at a bank: a gold inner line and a small lock (not a letter beside the K of 125K). */
#panel .pack-cell.kept {
  box-shadow: inset 0 0 0 1px rgba(217, 185, 120, 0.7);
}
#panel .pack-cell .keep-mark {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--ui-accent);
}
#panel .pack-cell .keep-mark svg {
  width: 10px;
  height: 10px;
}
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--ui-slot));
  grid-auto-rows: var(--ui-slot);
  gap: 4px;
  margin: 0;
  padding: 0;
  align-content: start;
}
#panel .slot-grid .pack-cell {
  min-height: 0;
  aspect-ratio: auto;
}
#panel .slot-grid .pack-cell .item-thumb,
#panel .pack-grid .pack-cell .item-thumb {
  width: 34px;
  height: 34px;
}
/* Slot plus price (a shop or a stall shelf). */
.slot-grid.shelf {
  grid-template-columns: repeat(auto-fill, 52px);
  grid-auto-rows: 66px;
  gap: 6px 4px;
}
.shelf-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.shelf-card .pack-cell {
  width: 48px;
  height: 48px;
}
.shelf-card .price {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: 700 10px / 1 var(--ui-font);
  color: var(--ui-accent);
  font-variant-numeric: tabular-nums;
}
.shelf-card .price svg {
  width: 10px;
  height: 10px;
}
.shelf-card.out .price {
  color: var(--ui-muted);
}
/* The purse and status pills. */
.coin-chip,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: 13px;
  border: 1px solid var(--ui-line);
  background: var(--ui-cell);
  color: var(--ui-text);
  font: 600 12px / 1 var(--ui-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.coin-chip svg {
  width: 14px;
  height: 14px;
  color: var(--ui-accent);
}
.pill {
  height: 22px;
  font-size: 11px;
  color: var(--ui-muted);
}

/* A disabled main action reads as unavailable, not as a dim gold button. */
:is(#panel, #make-x, #trade-sheet, #item-info) .primary:disabled {
  background: var(--ui-cell);
  border-color: var(--ui-line);
  color: var(--ui-muted);
  opacity: 0.75;
}
/* ---- Commerce windows: fixed frames (title, tools, one scroll, foot). They never change size while open. ---- */
#panel:is([data-kind="bank"], [data-kind="deposit"], [data-kind="shop"], [data-kind="exchange"], [data-kind="stall"]) #panel-heading {
  padding-right: 52px;
}
.head-tools {
  position: absolute;
  top: 9px;
  right: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#panel #panel-heading .head-talk {
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  gap: 5px;
  font-size: 11px;
}
#panel .head-talk svg {
  width: 14px;
  height: 14px;
}
@media (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  html body #panel[data-kind="bank"] {
    width: min(796px, calc(100vw - 32px));
    height: min(740px, calc(100dvh - 32px));
    max-height: none;
  }
  html body #panel[data-kind="shop"] {
    width: min(660px, calc(100vw - 32px));
    height: min(600px, calc(100dvh - 32px));
    max-height: none;
  }
  html body #panel[data-kind="exchange"] {
    width: min(740px, calc(100vw - 32px));
    height: min(600px, calc(100dvh - 32px));
    max-height: none;
  }
  html body #panel[data-kind="stall"] {
    width: min(560px, calc(100vw - 32px));
    height: min(600px, calc(100dvh - 32px));
    max-height: none;
  }
  html body #panel[data-kind="stall"] .shop-body.single {
    min-height: 220px;
  }
  html body #panel[data-kind="deposit"] {
    width: 420px;
    max-height: calc(100dvh - 32px);
  }
}
/* Bank: tabs, search, placeholders, the count; the grid scrolls; the backpack, presets and supplies beside it. */
.seg-tabs > button span {
  font-size: 11px;
}
.bank-body .bank-main {
  margin-right: -6px;
  padding-right: 6px;
}
.bank-grid {
  --ui-slot: 46px;
}
.bank-side {
  flex: 0 0 196px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 185, 120, 0.35) transparent;
}
.bank-side .pack-grid,
.dep-grid .pack-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--ui-slot));
  grid-template-rows: none;
  grid-auto-rows: var(--ui-slot);
  gap: 4px;
  flex: none;
}
.bank-side .pack-grid .pack-cell,
.dep-grid .pack-grid .pack-cell {
  aspect-ratio: auto;
  min-height: 0;
}
.bank-side .win-caption + .pack-grid {
  margin-bottom: 12px;
}
.presets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
#panel .preset {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 2px 3px 2px 8px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
}
.preset > span {
  flex: 1;
  min-width: 0;
  font: 600 11px / 1.15 var(--ui-font);
  color: var(--ui-text);
}
#panel .preset small {
  display: block;
  font-size: 9.5px;
  color: var(--ui-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#panel .preset :is(.primary, .secondary) {
  min-height: 24px;
  height: 24px;
  padding: 0 7px;
  font-size: 11px;
}
#panel .bank-side .supplies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
#panel .bank-side .supplies > div {
  padding: 5px 2px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: var(--ui-cell);
  text-align: center;
}
#panel .bank-side .supplies small {
  display: block;
  font: 700 8px / 1 var(--ui-font);
  letter-spacing: 0.6px;
  color: var(--ui-muted);
}
#panel .bank-side .supplies strong {
  display: block;
  margin: 3px 0 0;
  font: 700 13px / 1 var(--ui-font);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
#panel .bank-side .supplies span {
  display: none;
}
/* The foot: the amount on the left, the deposits on the right. */
.dep-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
#panel .dep-actions :is(.primary, .secondary) {
  min-height: 36px;
  padding: 0 12px;
  gap: 6px;
  white-space: nowrap;
}
#panel .dep-actions svg {
  width: 16px;
  height: 16px;
}
#panel .win-foot .note {
  margin: 0 0 0 auto;
}
/* Deposit box: RS3's 7 × 4 backpack, the amount and the three deposits; scrolls only on a short window. */
#panel[data-kind="deposit"] #panel-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 185, 120, 0.35) transparent;
}
#panel[data-kind="deposit"] #panel-content > .panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.dep-grid .pack-grid {
  grid-template-columns: repeat(7, var(--ui-slot));
  justify-content: center;
}
#panel .dep-foot {
  flex-wrap: wrap;
  row-gap: 8px;
}
.dep-foot .qty-seg {
  width: 100%;
}
.dep-foot .qty-seg > button {
  flex: 1;
}
.dep-foot .dep-actions {
  width: 100%;
  margin: 0;
  flex-wrap: wrap;
}
#panel .dep-foot .dep-actions > * {
  flex: 1 1 0;
}
#panel .dep-foot .dep-actions > .dep-main {
  flex: 1 1 100%;
}
/* Deposit's "keeps locked: …" line under its label. */
#panel .dep-actions .dep-main small {
  display: block;
  max-width: 28ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  font-weight: 500;
  color: inherit;
  opacity: 0.8;
}
#panel .win-note.plan {
  display: block;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#panel .win-note.plan b {
  color: var(--ui-text);
  font-weight: 600;
}
/* Shop and stall: the shelf scrolls; the backpack beside it; the foot tells about the item under the pointer. */
.shop-body.single .pack-grid {
  grid-template-columns: repeat(7, var(--ui-slot));
  grid-template-rows: none;
  grid-auto-rows: var(--ui-slot);
}
.shop-body.single .pack-grid .pack-cell {
  aspect-ratio: auto;
  min-height: 0;
}
.shop-side .win-note {
  margin-top: 8px;
}
.win-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  min-height: 38px;
}
.win-info-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-slot-line);
  background: var(--ui-cell);
}
.win-info-icon :is(svg, .item-thumb) {
  width: 28px;
  height: 28px;
}
.win-info-text {
  min-width: 0;
  font: 600 12px / 1.3 var(--ui-font);
  color: var(--ui-text);
}
#panel .win-info-text small {
  display: block;
  color: var(--ui-muted);
  font-weight: 400;
}
#panel .win-info-text small b {
  color: var(--ui-accent);
}
/* The Moth Market's switch between its stalls and the Grand Exchange. */
.seg-switch > button {
  padding: 0 12px;
}

/* ---- Grand Exchange ---- */
.ge-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.ge-body {
  display: block;
}
.ge-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 110px;
  padding: 7px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-slot-line);
  background: var(--ui-cell);
}
.ge-slot.empty {
  border-style: dashed;
  background: rgba(0, 0, 0, 0.12);
}
.ge-slot.complete {
  border-color: rgba(217, 185, 120, 0.75);
}
.ge-slot.cancelled {
  border-color: rgba(229, 138, 116, 0.5);
}
.ge-slot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ge-tag {
  font: 800 10px / 1 var(--ui-font);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.ge-tag.buy {
  color: var(--ui-good);
}
.ge-tag.sell {
  color: var(--ui-warn);
}
.ge-state {
  font: 600 10px / 1 var(--ui-font);
  color: var(--ui-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.ge-slot.complete .ge-state {
  color: var(--ui-accent);
}
.ge-slot.cancelled .ge-state {
  color: var(--ui-bad);
}
.ge-slot-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.ge-slot .slot-icon {
  width: 34px;
  height: 34px;
}
.ge-slot .slot-icon :is(svg, .item-thumb) {
  width: 26px;
  height: 26px;
}
.ge-slot-item > span:last-child {
  min-width: 0;
}
.ge-slot-item b,
.ge-item b {
  display: block;
  font: 600 13px / 1.25 var(--ui-font);
  color: var(--ui-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel .ge-slot-item small,
#panel .ge-item small {
  display: block;
  font-size: 11px;
  color: var(--ui-muted);
}
.slot-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-slot-line);
  background: rgba(0, 0, 0, 0.25);
}
.slot-icon :is(svg, .item-thumb) {
  width: 32px;
  height: 32px;
}
.slot-icon.big {
  width: 56px;
  height: 56px;
}
.slot-icon.big :is(svg, .item-thumb) {
  width: 44px;
  height: 44px;
}
.ge-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.ge-bar i {
  display: block;
  height: 100%;
  background: var(--ui-good);
  border-radius: 3px;
}
.ge-slot.complete .ge-bar i {
  background: var(--ui-accent);
}
.ge-slot.cancelled .ge-bar i {
  background: var(--ui-bad);
  opacity: 0.6;
}
.ge-slot-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.ge-done {
  flex: 1;
  white-space: nowrap;
  font: 500 11px var(--ui-font);
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}
.ge-done b {
  color: var(--ui-text);
}
#panel .ge-slot-foot :is(.primary, .secondary) {
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  font-size: 11px;
  gap: 5px;
}
#panel .ge-slot-foot .ge-abort {
  width: 30px;
  padding: 0;
}
.ge-empty-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
#panel .ge-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: var(--ui-cell-raised);
  color: var(--ui-text);
  font: 700 13px var(--ui-font);
}
#panel .ge-go svg {
  width: 16px;
  height: 16px;
}
#panel .ge-go.buy svg {
  color: var(--ui-good);
}
#panel .ge-go.sell svg {
  color: var(--ui-warn);
}
@media (hover: hover) {
  #panel .ge-go.buy:hover {
    border-color: rgba(143, 207, 114, 0.6);
    background: rgba(143, 207, 114, 0.1);
  }
  #panel .ge-go.sell:hover {
    border-color: rgba(224, 168, 74, 0.6);
    background: rgba(224, 168, 74, 0.1);
  }
}
/* The offer view: search and results on the left, the item, amount and price on the right. */
.ge-pick {
  flex: 0 0 286px;
  gap: 8px;
}
.ge-pick .win-search {
  flex: none;
}
.ge-form {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ge-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ge-item b {
  font-size: 15px;
  white-space: normal;
}
.ge-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font: 500 12px var(--ui-font);
  color: var(--ui-muted);
}
.ge-guide > span:first-child {
  margin-right: 4px;
}
.ge-guide b {
  font-size: 14px;
  color: var(--ui-accent);
}
.ge-guide .pill svg,
.ge-body ~ .win-foot .win-hint svg {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -2px;
}
.ge-guide .pill.bad {
  color: var(--ui-bad);
  border-color: rgba(200, 70, 62, 0.45);
}
.ge-guide + .ge-guide {
  margin-top: -4px;
}
.ge-field .win-caption {
  margin-bottom: 4px;
}
.stepper {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
#panel .stepper input {
  width: 110px;
  height: 34px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ui-text);
  font: 700 15px var(--ui-font);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color-scheme: dark;
}
#panel .stepper input:focus {
  outline: none;
  border-color: var(--ui-accent);
}
#panel .ge-field .step {
  min-height: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
#panel .ge-field .chips .step {
  min-height: 26px;
  height: 26px;
  font-size: 11px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.ge-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: var(--ui-cell);
  font: 600 12px var(--ui-font);
  color: var(--ui-muted);
}
.ge-total b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
.ge-total b svg {
  width: 15px;
  height: 15px;
  color: var(--ui-accent);
}
.ge-total.bad b {
  color: var(--ui-bad);
}
.ge-recent ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ge-recent li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--ui-line);
  font: 500 12px var(--ui-font);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
#panel .ge-recent small {
  color: var(--ui-muted);
}
.ge-spark {
  display: block;
  max-width: 100%;
  height: auto;
  color: var(--ui-accent);
}
.ge-spark circle:hover {
  r: 4.5;
}
#panel .win-foot [data-ge-place] {
  min-width: 170px;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  .win-body {
    flex-direction: column;
    gap: 10px;
  }
  .seg-tabs > button span,
  .dep-actions button span,
  .seg-switch > button span {
    display: none;
  }
  .seg-switch > button span:only-child,
  .seg-switch > button:first-child span,
  .seg-switch > button:last-child span {
    display: inline;
  }
  .win-tools {
    flex-wrap: wrap;
  }
  .win-search {
    flex: 1 1 140px;
  }
  .bank-side {
    flex: none;
    overflow: visible;
  }
  .bank-side .win-caption.fold {
    cursor: pointer;
    margin: 0;
    padding: 4px 0 6px;
  }
  .bank-side .win-caption.fold svg {
    display: block;
  }
  .bank-side.folded .win-caption.fold svg {
    transform: rotate(180deg);
  }
  .bank-side.folded > :not(.fold),
  #panel .bank-side > .supplies,
  .bank-body .bank-side > .win-caption:not(.fold) {
    display: none;
  }
  .presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 6px 0 0;
  }
  #panel .preset {
    flex-wrap: wrap;
    padding: 4px;
    gap: 3px;
  }
  .preset > span {
    flex-basis: 100%;
    padding-left: 2px;
  }
  #panel .preset :is(.primary, .secondary) {
    flex: 1;
  }
  .bank-side .pack-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 42px;
    margin-bottom: 0;
  }
  .shop-side .pack-grid {
    grid-auto-rows: 40px;
  }
  .shop-side > .win-note {
    display: none;
  }
  .slot-grid {
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  }
  .slot-grid.shelf {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  }
  .dep-actions {
    margin-left: auto;
  }
  #panel .dep-actions :is(.primary, .secondary) {
    width: 40px;
    padding: 0;
  }
  /* Deposit keeps its word on a phone; the other deposits stay icons. */
  #panel .dep-actions .dep-main {
    width: auto;
    padding: 0 10px;
  }
  .dep-actions .dep-main span {
    display: inline;
  }
  .dep-foot .dep-actions :is(.primary, .secondary) {
    width: auto;
    flex: 1;
  }
  .dep-foot .dep-actions button span {
    display: inline;
  }
  .dep-grid .pack-grid {
    grid-template-columns: repeat(7, minmax(0, 46px));
  }
  .qty-seg > button {
    min-width: 34px;
    padding: 0 6px;
  }
  .ge-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .ge-slot {
    min-height: 138px;
  }
  .ge-pick {
    flex: 1 1 auto;
  }
  .ge-form {
    flex: none;
    overflow: visible;
    gap: 6px;
  }
  .ge-recent,
  .ge-form .ge-item small,
  .ge-item + .ge-guide .pill {
    display: none;
  }
  .win-foot {
    flex-wrap: wrap;
  }
  .shop-body .win-foot .win-info {
    flex-basis: 100%;
  }
  #panel .win-foot [data-ge-place] {
    min-width: 0;
    flex: 1;
  }
  .head-tools .head-talk span,
  .ge-slot-foot button span,
  #panel[data-kind="exchange"] .win-tools .win-count {
    display: none;
  }
  #panel[data-kind="exchange"] .win-tools > :last-child {
    margin-left: auto;
  }
}
/* Short windows (a landscape phone): the bank's backpack column scrolls on its own; the exchange's form too. */
@media (max-height: 520px) and (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  .win-tools {
    margin-bottom: 6px;
  }
  .win-foot {
    margin-top: 6px;
    padding-top: 6px;
  }
  .ge-slot {
    min-height: 120px;
  }
  #panel[data-kind="deposit"] .win-note {
    display: none;
  }
  html body #panel[data-kind="stall"] .shop-body.single {
    min-height: 0;
  }
  #panel .dep-foot {
    flex-wrap: nowrap;
  }
  .dep-foot .qty-seg {
    width: auto;
  }
  #panel .dep-foot .dep-actions {
    flex-wrap: nowrap;
  }
  #panel .dep-foot .dep-actions > * {
    flex: 0 0 40px;
    width: 40px;
    padding: 0;
  }
  #panel .dep-foot .dep-actions button span {
    display: none;
  }
}
.stall-pack {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ---- The trade sheet: both offers side by side, your pack as RS3's 7 × 4 beneath, status pills and Accept below. ---- */
#trade-sheet {
  position: fixed;
  z-index: var(--z-window-3, 12);
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 100vw);
  height: 60vh;
  height: 60dvh;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  padding-bottom: var(--safe-bottom);
  border-radius: var(--ui-radius-win) var(--ui-radius-win) 0 0;
}
#trade-sheet header {
  border-bottom: 1px solid var(--ui-line);
}
#trade-sheet .tbody {
  padding: 12px 14px 8px;
}
.tpanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.tpane {
  min-width: 0;
  padding: 8px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: rgba(0, 0, 0, 0.18);
}
.tpane.theirs {
  border-color: rgba(232, 163, 58, 0.3);
}
html body #trade-sheet .trow {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--ui-slot));
  grid-auto-rows: var(--ui-slot);
  gap: 4px;
  min-height: calc(var(--ui-slot) * 2 + 4px);
  padding: 0;
  overflow: visible;
  background: none;
  align-content: start;
}
#trade-sheet .trow .tempty {
  grid-column: 1 / -1;
  align-self: center;
  margin: 0;
  font-size: 11px;
  color: var(--ui-muted);
}
html body #trade-sheet .tpack {
  grid-template-columns: repeat(7, minmax(0, var(--ui-slot)));
  grid-auto-rows: var(--ui-slot);
  gap: 4px;
  justify-content: center;
}
#trade-sheet .pack-cell {
  position: relative;
  min-height: 0;
  aspect-ratio: auto;
}
#trade-sheet .pack-cell .item-thumb {
  width: 34px;
  height: 34px;
}
#trade-sheet .pack-cell.mine {
  border-color: rgba(217, 185, 120, 0.5);
}
#trade-sheet .pack-cell.theirs {
  cursor: default;
}
#trade-sheet .pack-cell.flash {
  animation: trade-flash 3s ease-out;
}
#trade-sheet .pack-cell:is(.locked, .spent) > :not(.cnt):not(.keep-mark) {
  opacity: 0.35;
  filter: grayscale(0.8);
}
#trade-sheet .pack-cell .keep-mark {
  position: absolute;
  right: 2px;
  bottom: 2px;
  color: var(--ui-muted);
}
#trade-sheet .pack-cell .keep-mark svg {
  width: 10px;
  height: 10px;
}
html body #trade-sheet footer {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--ui-line);
  background: none;
}
#trade-sheet .tstatus {
  gap: 6px;
  margin-bottom: 10px;
}
#trade-sheet .tstatus .pill.ok {
  border-color: rgba(143, 207, 114, 0.55);
  color: var(--ui-good);
}
#trade-sheet .tstatus .tafter {
  color: var(--ui-muted);
}
#trade-sheet .tstatus .tafter.over {
  color: var(--ui-bad);
}
/* The amount prompt (RS3's Enter amount): a small titled window, the number large, OK beside it. */
#amount-prompt {
  width: min(340px, calc(100vw - 32px));
  padding: 10px 12px 12px;
  border-radius: var(--ui-radius-win);
  background: var(--ui-win);
  color: var(--ui-text);
}
#amount-prompt label {
  margin: -2px 0 2px;
  color: var(--ui-title);
  font: 700 13px / 1.3 var(--ui-font);
}
#amount-prompt input {
  height: 44px;
  min-height: 44px;
  border-radius: var(--ui-radius);
  font: 700 18px var(--ui-font);
  font-variant-numeric: tabular-nums;
}
#amount-prompt input:focus {
  outline: none;
  border-color: var(--ui-accent);
}
#amount-prompt .primary {
  min-height: 44px;
  min-width: 64px;
}
/* Leftovers of the cream sheet inside dark windows. */
#panel .qty-changed {
  background: rgba(200, 70, 62, 0.12);
  border: 1px solid rgba(200, 70, 62, 0.4);
  color: #f3c9bd;
}
#panel .qty-changed button {
  background: transparent;
  border: 1px solid rgba(243, 201, 189, 0.4);
  color: #f3c9bd;
}
#panel .qty-sheet {
  background: var(--ui-cell);
  border-color: var(--ui-line);
  color: var(--ui-muted);
}
#panel .qty-head {
  font: 600 13px var(--ui-font);
  color: var(--ui-text);
}
#panel .qty-head small {
  color: var(--ui-muted);
}
#panel .qty-preview li + li {
  border-top-color: var(--ui-line);
}
#panel .qty-warn {
  color: var(--ui-bad);
}
#panel .supplies > div {
  border-color: var(--ui-line);
}
#panel .supplies small {
  color: var(--ui-muted);
}
#panel .supplies strong {
  font-family: var(--ui-font);
  color: var(--ui-text);
}
/* ==========================================================================================================
   UI part 2: the interface window, every other window and the HUD on the same system (tokens on :root, components
   above). A window root never scrolls; Backpack, Worn and Skills fit their window, other surfaces scroll one region.
   ========================================================================================================== */
/* The interface window and its tab row: the bronze-trimmed frame, the gold title bar. */
#iface-body,
#iface-tabs {
  background: var(--ui-win);
  border: 1px solid var(--ui-trim);
  box-shadow: var(--ui-frame);
}
#iface-body {
  padding: 0 10px 10px;
}
#iface-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  min-height: 36px;
  margin: 0 -10px 8px;
  padding: 0 6px 0 12px;
  background: var(--ui-bar);
  border-bottom: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-win) var(--ui-radius-win) 0 0;
}
#iface-head .close-button:hover {
  color: var(--ui-text);
  background: var(--ui-cell-hover);
}
html body #iface-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#iface-content > * {
  flex-shrink: 0;
}
#iface-content > .scroll-y {
  flex: 1 1 auto;
  padding-right: 4px;
}
#iface-tabs button.active {
  background: var(--ui-cell-on);
  box-shadow: inset 0 -2px 0 var(--ui-accent);
}
/* Backpack: the 4 x 7 cells share the window, with a slim purse/count bar beneath. Short phone windows scroll
   at the minimum touch size instead of squeezing the cells. */
#iface-content > .pack-grid {
  flex: 0 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(7, 56px);
  gap: 3px;
}
#iface-content .pack-grid > .pack-cell {
  aspect-ratio: auto;
  min-height: 0;
  width: 100%;
  height: 100%;
}
#iface-content .pack-grid > .pack-cell > span:first-child {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
#iface-content .pack-cell .item-thumb {
  width: min(38px, 84%);
  height: min(38px, 84%);
}
#iface-content .pack-foot {
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  font-variant-numeric: tabular-nums;
}
#iface-content .pack-foot svg {
  color: var(--ui-accent);
}
/* Worn Equipment: the doll in a framed well with a faint figure behind it, four stat tiles beneath. */
.doll-well {
  position: relative;
  flex: 0 0 auto;
  padding: 10px 0;
  display: grid;
  place-items: center;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-slot-line);
  background: radial-gradient(ellipse at 50% 40%, rgba(217, 185, 120, 0.07), transparent 70%), var(--ui-cell);
  overflow: hidden;
}
.doll-figure {
  position: absolute;
  inset: 8% 0;
  width: 100%;
  height: 84%;
  fill: rgba(235, 225, 190, 0.05);
  stroke: none;
  pointer-events: none;
}
.doll-well .doll {
  position: relative;
  padding: 0;
  grid-template-columns: repeat(3, var(--doll, 56px));
  gap: 10px 18px;
}
.doll-well .doll-slot {
  width: var(--doll, 56px);
  height: var(--doll, 56px);
  border-color: var(--ui-slot-line);
  background: var(--ui-cell-raised);
}
.doll-well .doll-slot.empty {
  background: rgba(0, 0, 0, 0.3);
}
.doll-well .doll-slot .cnt {
  color: var(--ui-stack);
}
.doll-well .doll-slot .cnt.k {
  color: var(--ui-stack-k);
}
.doll-well .doll-slot .cnt.m {
  color: var(--ui-stack-m);
}
@media (min-height: 760px) and (min-width: 701px) {
  .doll-well {
    --doll: 60px;
  }
}
#iface-content .doll-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
  padding: 0;
  border: 0;
}
#iface-content .doll-stats > span {
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 4px 2px;
  color: var(--ui-muted);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  white-space: nowrap;
}
#iface-content .doll-stats svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--ui-accent);
}
#iface-content .doll-stats b {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* Skills, RS3's stats grid: four across, five rows filling the window; each cell is the art and the level with a thin
   bar to the next level (name and XP on hover). Remembrance, the elite skill, is last and trimmed in gold. */
#iface-content > .stats-grid {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 60px;
  gap: 3px;
  margin: 0 0 6px;
}
html body .stat-cell {
  position: relative;
  display: grid;
  border: 1px solid var(--ui-slot-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  color: var(--ui-text);
  font: 700 14px / 1.3 var(--ui-font);
  font-variant-numeric: tabular-nums;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 3px 4px 5px 5px;
  overflow: hidden;
  container-type: inline-size;
}
.stat-cell .skill-art,
.stat-cell > svg {
  grid-row: 1;
  width: 32px;
  height: 32px;
}
.stat-cell > b {
  grid-row: 1;
  justify-self: end;
  font: 700 17px / 1 var(--ui-font);
  color: var(--ui-stack);
  text-shadow: 1px 1px 0 #000;
  font-variant-numeric: tabular-nums;
}
.stat-xp {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--ui-xp);
  opacity: 0.75;
}
.stat-cell.elite {
  border-color: rgba(217, 185, 120, 0.55);
  background: linear-gradient(180deg, rgba(217, 185, 120, 0.12), transparent), var(--ui-cell);
}
/* Beneath: Total level, Total XP and Combat as three label-over-number tiles, then one row of icon chips (stance,
   spellbook, the three XP shares; words on hover, a share switched off dimmed). */
#iface-content .stats-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}
#iface-content .stats-foot > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 2px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  font-size: 10px;
  color: var(--ui-muted);
}
#iface-content .stats-foot b {
  font: 700 13px / 1.2 var(--ui-font);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
#iface-content .stats-acts {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.stats-acts-gap {
  flex: 1;
}
.stat-chip {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  cursor: pointer;
}
.stat-chip:hover {
  background: var(--ui-cell-hover);
}
.stat-chip.on {
  border-color: var(--ui-accent);
}
.stat-chip.off > * {
  opacity: 0.4;
  filter: grayscale(1);
}
.stat-chip :is(.ui-art, .skill-art, svg) {
  width: 20px;
  height: 20px;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body #panel:is([data-kind="bank"], [data-kind="shop"], [data-kind="exchange"]) {
    height: min(92dvh, 780px);
    max-height: none;
  }
  html body .stat-cell {
    grid-template-rows: 1fr auto;
    padding: 3px 6px;
  }
  .stat-cell .skill-art {
    width: 26px;
    height: 26px;
  }
  #iface-content .doll-stats svg,
  .iface-tools .win-count {
    display: none;
  }
  #iface-content .doll-stats > span {
    padding: 6px;
    gap: 4px;
  }
}
/* A tab's still head (quest points and links; the pavilion), then the one list that scrolls. */
.iface-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.iface-tools .win-count {
  font-size: 11px;
  color: var(--ui-muted);
}
.iface-links {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: var(--ui-cell);
  color: var(--ui-accent);
}
.icon-btn svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .icon-btn:hover {
    background: var(--ui-cell-hover);
    border-color: var(--ui-trim);
    color: var(--ui-select);
  }
}
.qp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: 13px;
  border: 1px solid var(--ui-slot-line);
  background: var(--ui-cell);
  font: 600 11px / 1 var(--ui-font);
  color: var(--ui-muted);
}
.qp-pill b {
  color: var(--ui-stack);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.qp-pill svg {
  width: 14px;
  height: 14px;
  color: var(--ui-accent);
}
/* The quest journal: a coloured dot (RS3: green done, yellow under way, red not started), the name and giver; a row
   opens in place. */
.quest-list .win-caption {
  margin: 8px 0 4px;
}
.quest-list .win-caption:first-child {
  margin-top: 0;
}
/* Quest art remains visible while the journal detail expands in its own card. */
html body .quest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; align-content: start; align-items: start; }
html body .quest-grid > .win-caption { grid-column: 1 / -1; }
html body .quest-grid .qj { min-width: 0; }
html body .quest-grid .qj.open { grid-column: 1 / -1; }
html body .quest-grid .qj-row { display: flex; align-items: center; gap: 6px; padding: 4px; }
/* The thumb stays 32px open or shut (the detail carries the painting); the name takes the rest and wraps by word. */
html body .quest-grid .qj .qj-card-art.qj-thumb { flex: none; display: block; width: 32px; height: 32px; aspect-ratio: auto; background-size: cover; background-position: center; border-radius: var(--ui-radius); }
html body .quest-grid .qj-row > span { flex: 1; min-width: 0; font: 600 12px / 1.25 var(--ui-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .quest-grid .qj.open .qj-row > span { white-space: normal; }
html body .quest-grid .qj[data-status="locked"] .qj-card-art { opacity: .45; filter: grayscale(1); }
html body .quest-grid .qj-detail { min-width: 0; overflow-wrap: anywhere; }
html body .quest-grid .qj-detail :is(button, .qj-actions) { max-width: 100%; white-space: normal; flex-wrap: wrap; }
@media (max-width: 700px) {
  html body .quest-grid { gap: 5px; }
  html body .quest-grid .qj-detail { padding: 8px; }
  html body .quest-grid button { min-height: 44px; }
}

.qj {
  border-radius: var(--ui-radius);
  border: 1px solid transparent;
}
.qj.open {
  background: var(--ui-cell);
  border-color: var(--ui-line);
  margin: 2px 0;
}
html body .qj-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--ui-radius);
  background: none;
  color: var(--ui-text);
  font: 600 12px / 1.25 var(--ui-font);
  text-align: left;
}
.qj-row > span {
  flex: 1;
  min-width: 0;
}
.qj-row small {
  display: block;
  font-weight: 400;
  font-size: 10.5px;
  color: var(--ui-muted);
}
.qj-row > svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--ui-muted);
  transition: transform 0.15s;
}
.qj.open .qj-row > svg {
  transform: rotate(180deg);
}
@media (hover: hover) {
  .qj-row:hover {
    background: var(--ui-cell-hover);
  }
}
.qj-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #d9534f;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.qj[data-status="done"] .qj-row > span {
  color: var(--ui-muted);
}
.qj-detail {
  padding: 0 8px 8px 22px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ui-muted);
}
#iface-content .qj-detail p {
  margin: 0 0 5px;
}
.qj-detail p > svg {
  width: 12px;
  height: 12px;
  margin: 0 5px -2px 0;
  color: var(--ui-accent);
}
.qj-step {
  display: flex;
  color: var(--ui-text);
}
#iface-content .qj-step b {
  color: var(--ui-select);
}
.qj-need {
  color: var(--ui-bad) !important;
}
#iface-content .qj-detail .primary {
  width: 100%;
  margin-top: 2px;
}
/* Commons: the pavilion in one row (art, stage dots, stage name, walk-there right), the needs as tiles, one ranked
   list of givers, the bell fund's coin chips, then one card each for the town project and upkeep. */
.commons-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
:is(#iface-content, #panel) .commons-head .pavilion-art {
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
}
.commons-head-main {
  flex: 1 1 auto;
  min-width: 0;
}
.commons-head .stage-dots {
  margin: 0 0 2px;
}
:is(#iface-content, #panel) .commons-head .project-title {
  margin: 0;
}
.walk-there {
  flex: none;
}
.rank-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.rank-list > li {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 6px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  font: 600 11px / 1.3 var(--ui-font);
  color: var(--ui-text);
}
.rank-list > li > span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-list > li > i {
  font-style: normal;
  font-size: 9px;
  color: var(--ui-accent);
}
.rank-list > li > b {
  font-variant-numeric: tabular-nums;
  color: var(--ui-muted);
}
.rank-list > li.you {
  background: var(--ui-cell-on);
  color: var(--ui-select);
}
.rank-list > .rank-more {
  color: var(--ui-muted);
}
.bell-row {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
}
.bell-label {
  flex: 1;
  font: 600 11px / 1.3 var(--ui-font);
  color: var(--ui-muted);
}
:is(#iface-content, #panel) .bell-row .coin-give {
  width: auto;
  min-height: 28px;
  padding: 0 8px;
  gap: 3px;
  font-size: 11px;
}
.coin-give .ui-art {
  width: 16px;
  height: 16px;
}
.town-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 5px 6px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
}
.town-card .town-art {
  flex: none;
  width: 32px;
  height: 32px;
  aspect-ratio: auto;
  max-height: none;
  margin: 0;
  background-size: cover;
}
.town-main {
  flex: 1;
  min-width: 0;
  font: 600 12px / 1.3 var(--ui-font);
}
.town-main b {
  display: block;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#iface-content, #panel) .town-card > button {
  width: auto;
  min-height: 28px;
  padding: 0 10px;
}
/* Games: the owner and two summary tiles, then the ledgers scroll. */
.record-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 6px 0 8px;
}
.record-tiles > div {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  min-width: 0;
}
.record-tiles small {
  font: 700 9.5px / 1.2 var(--ui-font);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-accent);
}
.record-tiles strong {
  font: 700 16px / 1.1 var(--ui-font);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
.record-tiles strong i {
  margin-left: 2px;
  font: 600 10px var(--ui-font);
  color: var(--ui-muted);
  font-style: normal;
}
.record-tiles span {
  font-size: 10px;
  color: var(--ui-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.record-head .record-owner {
  margin: 0;
}
/* The Grove clock (scenes/world.js worldClock): the world's own hour, never the real one. Its own chip at the top right,
   just left of the minimap, the same size whatever the map or layout settings. */
html body #world-clock {
  position: fixed;
  z-index: var(--z-hud, 4);
  top: calc(max(var(--hud-m), env(safe-area-inset-top)) / var(--ui-scale, 1));
  right: calc((max(var(--hud-m), env(safe-area-inset-right)) + 204px) / var(--ui-scale, 1));
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 5px 8px;
  font: 600 11px / 1 var(--ui-font);
  font-variant-numeric: tabular-nums;
  color: var(--ui-text);
  border: 1px solid var(--ui-trim);
  background: var(--ui-win);
  white-space: nowrap;
}
html body #world-clock[hidden] {
  display: none;
}
html body #world-clock i {
  font-style: normal;
  color: #f2c75c;
}
html body #world-clock:is([data-phase="night"], [data-phase="dusk"]) i {
  color: #b9c7ef;
}
/* The online count under the minimap: a labelled chip that opens People. */
html body #connection {
  cursor: pointer;
  width: auto;
  white-space: nowrap;
  padding: 5px 9px 5px 8px;
  gap: 5px;
  font: 600 11px / 1 var(--ui-font);
  color: var(--ui-text);
  border: 1px solid var(--ui-trim);
  background: var(--ui-win);
}
/* A button that cannot act yet but says why when pressed (data-why, input/pointer.js). */
button[aria-disabled="true"] {
  opacity: 0.55;
}
/* A Players row opens that player's card. */
#panel .resident-row[data-person-open] {
  cursor: pointer;
}
/* A non-framed window's still head (a tab strip, a filter) sits above its one scrolling region. */
#panel-content > .panel-scroll:not(:first-child) {
  margin-top: 0;
  padding-top: 2px;
}
#panel-content > .panel-top {
  margin-bottom: 10px;
}
.panel-top.seg,
#panel-content > .seg-tabs {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}
#panel-content > .seg-tabs > button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 6px;
}
/* Tabbed windows keep one size while their tabs change. Settings needs less height. */
@media (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  html body #panel:is([data-kind="log"], [data-kind="hiscores"], [data-kind="wiki"], [data-kind="keys"]) {
    width: min(500px, calc(100vw - 32px));
    height: min(640px, calc(100dvh - 48px));
    max-height: none;
  }
  html body #panel[data-kind="settings"] {
    width: min(500px, calc(100vw - 32px));
    height: min(520px, calc(100dvh - 48px));
    max-height: none;
  }
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body #panel:is([data-kind="log"], [data-kind="hiscores"], [data-kind="settings"], [data-kind="wiki"], [data-kind="keys"]) {
    height: min(86dvh, 720px);
    max-height: none;
  }
}
/* A list row: a framed picture or mark, the name with a muted line beneath, an action or a status on the right. */
.list-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--ui-line);
}
.list-row:last-child {
  border-bottom: 0;
}
.list-main {
  flex: 1;
  min-width: 0;
  font: 600 12px / 1.3 var(--ui-font);
  color: var(--ui-text);
}
.list-main em {
  font-style: normal;
  font-weight: 500;
  color: var(--ui-accent);
  font-size: 11px;
}
#panel .list-main small {
  display: block;
  margin-top: 1px;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ui-muted);
}
.list-row > :is(button, .pill) {
  flex: none;
}
.list-row .slot-icon {
  width: 30px;
  height: 30px;
}
.list-row .slot-icon :is(svg, .item-thumb) {
  width: 24px;
  height: 24px;
}
.list-row .slot-icon > svg {
  width: 20px;
  height: 20px;
  color: var(--ui-muted);
}
.list-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--ui-line);
  color: var(--ui-muted);
}
.list-mark svg {
  width: 13px;
  height: 13px;
}
.list-row.done .list-mark {
  border-color: rgba(143, 207, 114, 0.5);
  background: rgba(143, 207, 114, 0.12);
  color: var(--ui-good);
}
.list-row.unknown .list-main {
  color: var(--ui-muted);
}
.list-row.unknown .slot-icon {
  opacity: 0.55;
}
.list-row.unknown .slot-icon .item-thumb {
  filter: grayscale(1) brightness(0.55);
}
.pill.ok {
  color: var(--ui-good);
  border-color: rgba(143, 207, 114, 0.4);
}
.list-bar {
  display: block;
  height: 4px;
  margin-top: 5px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.list-bar > i {
  display: block;
  height: 100%;
  background: var(--ui-xp);
}
.list-row.task {
  margin-bottom: 10px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
}
.win-empty.small {
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  text-align: center;
  color: var(--ui-muted);
}
.win-empty.small > svg {
  width: 28px;
  height: 28px;
  opacity: 0.7;
}
#panel .win-empty.small p {
  margin: 0;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#panel .chip-row > button {
  width: auto;
  min-height: 30px;
  padding: 0 12px;
}
/* ---- Side panels (achievements log, worn, quests, lodestones, item card): chips carry numbers, folds hold depth. ---- */
:is(#panel, #iface-content, #item-info) .pill svg {
  width: 12px;
  height: 12px;
  flex: none;
}
:is(#panel, #iface-content, #item-info) .pill .item-thumb {
  width: 14px;
  height: 14px;
}
:is(#panel, #iface-content, #item-info) .pill.bad {
  color: var(--ui-bad);
  border-color: rgba(229, 138, 116, 0.4);
}
#panel .list-row .primary .item-thumb {
  width: 18px;
  height: 18px;
}
/* A fold: a summary row (name, chips, chevron) that opens in place. */
details.fold {
  margin: 0 0 6px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
}
details.fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 8px;
  border-radius: var(--ui-radius);
  list-style: none;
  cursor: pointer;
  font: 600 12px / 1.3 var(--ui-font);
  color: var(--ui-text);
}
details.fold > summary::-webkit-details-marker {
  display: none;
}
details.fold > summary > svg:last-child {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--ui-muted);
  transition: transform 0.15s;
}
details.fold[open] > summary > svg:last-child {
  transform: rotate(180deg);
}
/* Worn: the death line under the stats, one row of pills; their hovers list the items. */
.fall-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.fall-line .pill {
  font-size: 12px;
}
.fall-line .pill .ui-art {
  width: 14px;
  height: 14px;
}
.fall-line .fall-mark {
  font-size: 18px;
  line-height: 1;
  flex: none;
}
/* Achievements log: pictures-only tabs; diary tiers as checklists; emotes as a grid of buttons. */
#panel-content > .log-tabs > button {
  padding: 0;
}
.diary-tier {
  padding: 6px 10px 8px;
  border-top: 1px solid var(--ui-line);
}
.diary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.diary-head > b {
  font: 700 12px / 1.2 var(--ui-font);
  color: var(--ui-text);
}
.diary-reward {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
#panel .diary-head > button {
  width: auto;
  min-height: 26px;
  height: 26px;
  padding: 0 12px;
}
.diary-tasks {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.diary-tasks li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 2px 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ui-muted);
}
.diary-tasks li svg {
  width: 11px;
  height: 11px;
  flex: none;
  margin-top: 2px;
}
.diary-tasks li.done {
  color: var(--ui-text);
}
.diary-tasks li.done svg {
  color: var(--ui-good);
}
.diary-tier.done .diary-tasks {
  display: none;
}
/* An area's painted badge: the summary shows the best tier claimed, each tier head its own; unearned ones stay grey. */
details.fold > summary > .diary-badge {
  width: 36px;
  height: 36px;
  margin: -4px 0;
}
.diary-head > .diary-tier-badge {
  width: 24px;
  height: 24px;
}
:is(.diary-badge, .diary-tier-badge).unearned {
  opacity: 0.45;
  filter: grayscale(1);
}
#panel .diary-perk {
  display: flex;
  gap: 5px;
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--ui-accent);
}
.diary-perk svg {
  width: 11px;
  height: 11px;
  flex: none;
  margin-top: 2px;
}
.emote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 4px;
}
#panel .emote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 4px 2px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell-raised);
  color: var(--ui-text);
  font: 600 11.5px / 1.2 var(--ui-font);
  text-align: center;
}
#panel .emote > :first-child {
  width: 26px;
  height: 26px;
}
#panel .emote > svg:first-child {
  width: 20px;
  height: 20px;
  margin: 3px;
  color: var(--ui-accent);
}
/* Icon-only, as in chat: the name and unlock line are the button's title. */
#panel .emote > span, #panel .emote small { display: none; }
#panel .emote.locked {
  opacity: 1;
  background: var(--ui-cell);
  color: var(--ui-muted);
}
#panel .emote.locked > :first-child {
  opacity: 0.4;
  filter: grayscale(1);
}
#panel .emote small {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
}
#panel .emote small svg {
  width: 9px;
  height: 9px;
  flex: none;
}
@media (hover: hover) {
  #panel .emote:not(:disabled):hover {
    background: var(--ui-cell-hover);
    border-color: var(--ui-trim-hi);
  }
}
.collection-pick {
  display: flex;
  align-items: center;
  gap: 8px;
}
#panel .collection-pick select {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  color: var(--ui-text);
  font: 600 12px var(--ui-font);
}
#panel .item.missing {
  opacity: 0.38;
  filter: grayscale(1);
}
/* ---- Production windows (forge, inn kitchen and quern, Tamsin's kettle and bench, Saffa's loom): RS3's grid of
   products, the chosen one's materials and level beside it, the amount and one Make button. ---- */
@media (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  html body #panel:is([data-kind="forge"], [data-kind="inn"], [data-kind="loom"], [data-kind="fletch"]) {
    width: min(660px, calc(100vw - 32px));
    height: min(580px, calc(100dvh - 48px));
    max-height: none;
  }
}
.prod-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 14px;
}
.prod-pick {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.prod-pick > .scroll-y {
  padding-right: 4px;
}
.prod-pick .win-caption {
  margin-top: 4px;
}
.prod-pick .win-caption ~ .win-caption {
  margin-top: 14px;
}
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 4px;
}
.prod-later > summary {
  margin: 8px 0 4px;
  font: 600 12px / 1.4 var(--ui-font);
  color: var(--ui-muted);
  cursor: pointer;
}
#panel .prod-cell {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  min-height: 0;
}
#panel .prod-cell .item-thumb {
  width: 38px;
  height: 38px;
}
#panel .prod-cell > svg {
  width: 26px;
  height: 26px;
}
#panel .prod-cell.locked > :is(.item-thumb, svg) {
  opacity: 0.35;
  filter: grayscale(0.9);
}
#panel .prod-cell.short > :is(.item-thumb, svg) {
  opacity: 0.6;
}
.prod-lv {
  position: absolute;
  right: 3px;
  bottom: 2px;
  display: flex;
  align-items: center;
  gap: 1px;
  font: 700 10px / 1 var(--ui-font);
  font-style: normal;
  color: var(--ui-muted);
  text-shadow: 1px 1px 0 #000;
}
.prod-lv svg {
  width: 9px;
  height: 9px;
}
#panel .prod-cell.on {
  background: var(--ui-cell-on);
  border-color: var(--ui-select);
  box-shadow: inset 0 0 0 1px var(--ui-select);
}
.prod-build {
  margin-top: 6px;
}
.prod-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-left: 14px;
  border-left: 1px solid var(--ui-line);
}
.prod-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
#panel .prod-head h3 {
  font: 700 14px / 1.25 var(--ui-font);
  color: var(--ui-title);
}
#panel .prod-head small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ui-muted);
}
.prod-mats {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}
.prod-mat {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 12px / 1.25 var(--ui-font);
  color: var(--ui-text);
}
.prod-mat .slot-icon {
  width: 34px;
  height: 34px;
}
.prod-mat .slot-icon :is(svg, .item-thumb) {
  width: 26px;
  height: 26px;
}
#panel .prod-mat small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}
.prod-mat b {
  color: var(--ui-good);
}
.prod-mat.short b {
  color: var(--ui-bad);
}
/* The amount and Make, at the foot of the detail column. */
#panel .prod-detail .qty-sheet {
  margin: auto 0 0;
  padding: 0;
  border: 0;
  background: none;
}
#panel .prod-detail .qty {
  display: flex;
  width: 100%;
  margin-bottom: 8px;
}
#panel .prod-detail .qty-preview {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ui-muted);
}
#panel .prod-detail .qty-preview b {
  color: var(--ui-text);
}
#panel .prod-detail .qty-sheet > .primary {
  width: 100%;
  min-height: 38px;
  justify-content: center;
}
#panel .prod-detail .win-strip {
  margin-top: auto;
}
.hearth-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-left: auto;
  font: 500 11px / 1.2 var(--ui-font);
  color: var(--ui-muted);
}
.hearth-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hearth-chip svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--ui-accent);
}
#panel .win-tools > .secondary {
  flex: none;
  min-height: 30px;
  height: 30px;
  padding: 0 12px;
}
.prod-services .list-row {
  border-bottom: 1px solid var(--ui-line);
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body #panel:is([data-kind="forge"], [data-kind="inn"], [data-kind="loom"], [data-kind="fletch"]) {
    height: min(90dvh, 760px);
    max-height: none;
  }
  .prod-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .prod-pick {
    flex: 1 1 auto;
  }
  .prod-detail {
    flex: none;
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid var(--ui-line);
  }
  .prod-head {
    margin-bottom: 8px;
  }
  .prod-mats {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 8px;
  }
  #panel .prod-detail .qty-preview li:nth-child(n + 3) {
    display: none;
  }
}
@media (max-height: 520px) and (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  .prod-detail {
    overflow-y: auto;
  }
}
/* Two-tab strips keep their words on a phone. */
/* The chapel: the altar's two acts side by side, the prayers as a grid of toggles. */
#panel[data-kind="chapel"] .panel-scroll > button.secondary {
  display: inline-flex;
  width: calc(50% - 4px);
  margin: 0 4px 6px 0;
  justify-content: center;
}
#panel[data-kind="chapel"] .fight-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
#panel[data-kind="chapel"] .fight-row > button {
  width: 100%;
  margin: 0;
  justify-content: flex-start;
}
@media (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  /* Clear of the minimap cluster's last row (layout.js --map-bottom) when that still fits the Backpack's 4 x 7 grid;
     on a short screen the window keeps the old line under the map itself. */
  #iface-body {
    max-height: max(calc(100dvh - var(--map-bottom, 214px) - 84px), min(calc(100dvh - 290px), 504px));
  }
  html body #trade-sheet {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(600px, calc(100vw - 32px));
    height: min(600px, calc(100dvh - 32px));
    border-radius: var(--ui-radius-win);
    border: 1px solid var(--ui-trim);
  }
  html body #panel[data-kind="chapel"] {
    width: min(500px, calc(100vw - 32px));
    height: min(600px, calc(100dvh - 48px));
    max-height: none;
  }
}
/* ---- Preferences: four tabs of short lists; each row a label with a quiet line and its control, no card per row. */
#panel :is(.setting, .password-form) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: none;
}
#panel .password-form {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
#panel :is(.setting, .password-form) label {
  flex: 1;
  min-width: 0;
  font: 600 12.5px / 1.3 var(--ui-font);
  color: var(--ui-text);
}
#panel :is(.setting, .password-form) label small {
  display: block;
  margin-top: 0;
  font: 400 11px / 1.3 var(--ui-font);
  color: var(--ui-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#panel .setting > button,
#panel .password-row > button {
  flex: none;
  width: auto;
  min-height: 30px;
  height: 30px;
  padding: 0 14px;
}
.password-row {
  display: flex;
  gap: 6px;
}
#panel .password-row input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: rgba(0, 0, 0, 0.3);
  color: var(--ui-text);
}
#panel .setting-control {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
#panel .setting-value {
  width: 4ch;
  text-align: right;
  font: 600 12px / 1.4 var(--ui-font);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
#panel .setting input[type="range"] {
  width: clamp(80px, 25vw, 140px);
  flex: none;
  accent-color: var(--ui-accent);
}
#panel .setting select {
  height: 30px;
  padding: 0 8px;
}
/* (Dead #collection-page rule removed: no such select exists; .collection-pick select sizes itself.) */
/* A checkbox is a switch. */
#panel .setting input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: 10px;
  border: 1px solid var(--ui-line);
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#panel .setting input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ui-muted);
  transition: transform 0.15s, background 0.15s;
}
#panel .setting input[type="checkbox"]:checked {
  background: var(--ui-cell-on);
  border-color: var(--ui-accent);
}
#panel .setting input[type="checkbox"]:checked::before {
  transform: translateX(16px);
  background: var(--ui-select);
}
#panel .setting input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ui-select);
  outline-offset: 2px;
}
#panel[data-kind="settings"] .key-note {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ui-muted);
}
#panel[data-kind="settings"] .section-title {
  display: none;
}
/* ---- The wiki: search fixed at the top; skills and creatures as picture tiles; results as icon rows. ---- */
.panel-top .win-search {
  flex: 1;
}
.wiki-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 4px;
}
#panel .wiki-tile,
#panel .wiki-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px 4px 4px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: var(--ui-cell);
  color: var(--ui-text);
  font: 600 12px / 1.2 var(--ui-font);
  text-align: left;
}
#panel .wiki-row {
  margin-bottom: 4px;
}
#panel .wiki-tile .item-thumb {
  width: 30px;
  height: 30px;
  flex: none;
}
#panel .wiki-tile small {
  display: block;
  font-weight: 400;
  color: var(--ui-muted);
}
/* ---- Hiscores: the skill picker as pictures, the board as a ranked table. ---- */
.hiscore-pick {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 3px;
}
#panel .hiscore-pick .pack-cell {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  min-height: 0;
}
#panel .hiscore-pick .pack-cell :is(.item-thumb, svg) {
  width: 70%;
  height: 70%;
}
#panel .hiscore-pick .pack-cell > svg {
  color: var(--ui-accent);
  width: 55%;
  height: 55%;
}
#panel .hiscore-pick .pack-cell.on {
  background: var(--ui-cell-on);
  border-color: var(--ui-select);
}
.hiscore-table {
  width: 100%;
  border-collapse: collapse;
  font: 500 12px / 1.3 var(--ui-font);
  font-variant-numeric: tabular-nums;
}
.hiscore-table th {
  padding: 4px 6px;
  font: 700 10px var(--ui-font);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-accent);
  text-align: left;
  border-bottom: 1px solid var(--ui-line);
}
.hiscore-table td {
  padding: 6px;
  border-bottom: 1px solid var(--ui-line);
  color: var(--ui-text);
}
.hiscore-table :is(th, td):nth-child(n + 3) {
  text-align: right;
}
.hiscore-table td:first-child {
  color: var(--ui-muted);
  width: 44px;
}
.hiscore-table tr.you td {
  background: var(--ui-cell-on);
  color: var(--ui-select);
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  .hiscore-pick {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
/* ---- Lodestones: tiles with the place's sign; one not yet visited is locked. ---- */
.lode-status {
  margin-bottom: 8px;
}
.lode-status.wait {
  color: var(--ui-warn);
}
.lode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
#panel .lode {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 4px 6px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-slot-line);
  background: var(--ui-cell);
  color: var(--ui-text);
  font: 600 12px / 1.2 var(--ui-font);
  text-align: left;
}
#panel .lode > span:last-child {
  min-width: 0;
}
#panel .lode small {
  display: block;
  overflow: hidden;
  font-weight: 400;
  font-size: 10px;
  color: var(--ui-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lode-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ui-trim);
  background: radial-gradient(circle, rgba(217, 185, 120, 0.2), rgba(0, 0, 0, 0.2));
  color: var(--ui-select);
}
.lode-icon > svg {
  width: 16px;
  height: 16px;
}
/* The painted lodestone (stationIcon) fills the ring; only the bare <i> is the lock badge. */
.lode-icon > .item-thumb {
  width: 26px;
  height: 26px;
}
.lode-icon > i:not(.item-thumb) {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ui-win-solid);
  color: var(--ui-muted);
}
.lode-icon i svg {
  width: 9px;
  height: 9px;
}
/* A stone's own painting (art/ui/lodestones, game/features/map.js lodeArt) stands bare, without the ring. */
#panel .lode .lode-icon.painted {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: none;
}
#panel .lode .lode-icon.painted > .item-thumb {
  width: 40px;
  height: 40px;
}
#panel .lode.locked {
  opacity: 1;
  color: var(--ui-muted);
}
#panel .lode.locked .lode-icon {
  border-color: var(--ui-line);
  background: rgba(0, 0, 0, 0.25);
  color: var(--ui-muted);
}
#panel .lode:disabled:not(.locked) {
  opacity: 0.6;
}
@media (hover: hover) {
  #panel :is(.wiki-tile, .wiki-row):hover {
    background: var(--ui-cell-hover);
    border-color: var(--ui-trim);
  }
  #panel .lode:hover:not(:disabled) {
    background: var(--ui-cell-hover);
    border-color: var(--ui-trim-hi);
  }
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  .lode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ---- People: a portrait, the name and a status dot, the actions on the right. ---- */
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #6d6f68;
  vertical-align: 0;
}
.dot.on {
  background: var(--ui-good);
}
.dot.echo,
.dot.rest {
  background: var(--ui-accent);
}
.row-acts {
  display: flex;
  gap: 4px;
  flex: none;
}
#panel .row-acts > button {
  width: auto;
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
}
.portrait-cell {
  overflow: hidden;
  border-radius: 50%;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #panel-content > .seg-tabs > button span {
    display: none;
  }
  .resident-row {
    flex-wrap: wrap;
  }
  .resident-row .row-acts {
    width: 100%;
    padding-left: 48px;
  }
}
/* ---- Controls: the table's head stays while its rows scroll. ---- */
#panel .keys-help thead th {
  position: sticky;
  top: -12px;
  z-index: 1;
  background: var(--ui-win-solid);
}
/* ---- The world map (game/features/map.js mapPanelHtml): the search and Jump to on top, the list (categories, a
   category's rows or the search's) beside the map. On a phone the map fills the window and the list is a bottom sheet. ---- */
html body #panel[data-kind="map"] .panel-scroll {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
html body #panel[data-kind="map"] .map-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}
html body #panel .map-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}
html body #panel .map-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px 0 38px;
  border-radius: 999px;
  border: 1px solid var(--ui-line, #c9cdb8);
  background: var(--ui-cell, #f6f3e6);
  color: var(--ui-text, #2c3f33);
  font: 500 16px var(--ui-font, sans-serif);
  accent-color: auto;
  height: auto;
  padding-right: 42px;
}
#panel .map-search input::-webkit-search-cancel-button {
  display: none;
}
html body #panel .map-clear {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ui-muted);
}
html body #panel .map-clear[hidden] {
  display: none;
}
html body #panel .map-clear svg {
  width: 14px;
  height: 14px;
}
html body #panel .map-jump-wrap {
  position: relative;
  flex: none;
}
html body #panel .map-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
}
html body #panel .map-jump-btn svg {
  width: 16px;
  height: 16px;
}
html body #panel .map-jump {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  width: 220px;
  padding: 6px;
  border: 1px solid var(--ui-trim);
  border-radius: var(--ui-radius-win, 10px);
  background: var(--ui-win-solid);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
html body #panel .map-jump[hidden] {
  display: none;
}
html body #panel .map-jump button {
  min-height: 36px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ui-radius);
  background: transparent;
  color: var(--ui-text);
  font: 600 13px var(--ui-font);
  text-align: left;
}
html body #panel .map-jump button:hover,
html body #panel .map-jump button:focus-visible {
  background: var(--ui-cell-hover);
}
html body #panel .map-side {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 185, 120, 0.35) transparent;
}
html body #panel .map-side .map-travel {
  margin: 0;
}
html body #panel .map-grab {
  display: none;
}
html body #panel[data-kind="map"] .map-wrap {
  background: #7d9a69;
  border: 1px solid rgba(231, 211, 158, 0.45);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
}
html body #panel[data-kind="map"] .map-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#map-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* The categories: one row each, its pin, its name and how many. */
.map-cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
html body #panel .map-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 12px 0 8px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  color: var(--ui-text);
  font: 600 13px var(--ui-font);
  text-align: left;
  cursor: pointer;
}
html body #panel .map-cat:hover,
html body #panel .map-cat:focus-visible {
  border-color: var(--ui-trim);
  background: var(--ui-cell-hover);
}
.map-cat-name {
  flex: 1;
  min-width: 0;
}
.map-count {
  color: var(--ui-muted);
  font: 700 12px var(--ui-font);
  font-variant-numeric: tabular-nums;
}
.map-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 2px 4px;
  color: var(--ui-muted);
  font: 600 12px var(--ui-font);
}
.map-list-head b {
  flex: 1;
  color: var(--ui-title);
  font: 700 14px var(--ui-font);
}
html body #panel .map-back {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  background: var(--ui-cell);
  color: var(--ui-text);
}
html body #panel .map-back svg {
  width: 15px;
  height: 15px;
}
.map-sub {
  margin: 6px 2px 0;
  color: var(--ui-muted);
  font: 700 10px var(--ui-font);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.map-empty {
  margin: 0;
  padding: 6px 4px 8px;
  color: var(--ui-muted);
  font: 500 13px / 1.4 var(--ui-font);
}
html body #panel .map-foot {
  margin-top: 6px;
}
.map-side .lode-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* A row: its picture, name and one line; Walk always, Show and Guide on hover or for the highlighted row. */
.map-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 6px 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius);
  cursor: pointer;
}
.map-row:hover,
.map-row.on {
  border-color: var(--ui-trim);
  background: var(--ui-cell-hover);
}
html body #panel .map-row > .map-kind-dot {
  width: 32px;
  height: 32px;
}
.map-row-art,
#panel .map-card-head .map-face {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  border: 1.5px solid var(--ui-trim);
  background: #f4ead2;
}
.map-row-art .art-icon,
#panel .map-card-head .map-face .art-icon {
  width: 100%;
  height: 100%;
  margin: 0;
  background-size: cover;
}
.map-row-main {
  min-width: 0;
}
.map-row-main b,
.map-row-main small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.map-row-main b {
  color: var(--ui-text);
  font: 600 13px / 1.3 var(--ui-font);
}
.map-row-main small {
  color: var(--ui-muted);
  font: 400 11.5px / 1.35 var(--ui-font);
}
.map-row-tag {
  color: var(--ui-select);
  font-weight: 600;
}
html body #panel .map-track-pill {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  vertical-align: 1px;
}
.map-row-acts {
  display: flex;
  align-items: center;
  gap: 4px;
}
html body #panel .map-row-acts > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  height: 30px;
  min-height: 0;
  margin: 0;
  padding: 0 9px;
  font: 600 12px var(--ui-font);
  white-space: nowrap;
}
html body #panel .map-row-acts svg {
  width: 14px;
  height: 14px;
}
html body #panel .map-row-acts :is(.map-show, .map-guide) {
  display: none;
  width: 30px;
  padding: 0;
}
html body #panel .map-row-acts :is(.map-show, .map-guide) span {
  display: none;
}
html body #panel :is(.map-row:hover, .map-row.on, .map-row:focus-within) :is(.map-show, .map-guide) {
  display: inline-flex;
}
/* Go & mine and Teleport wait for the chosen row, whose buttons take a line of their own under its name. */
html body #panel .map-row-acts .map-go {
  display: none;
}
html body #panel .map-row.on {
  grid-template-columns: 32px minmax(0, 1fr);
}
html body #panel .map-row.on .map-row-acts {
  grid-column: 2;
  flex-wrap: wrap;
}
html body #panel .map-row.on .map-row-acts > button {
  display: inline-flex;
  width: auto;
  padding: 0 9px;
}
html body #panel .map-row.on .map-row-acts span {
  display: inline;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body #panel[data-kind="map"] {
    inset: 0;
    width: auto;
    height: auto;
    max-height: none;
    transform: none;
    border: 0;
    border-radius: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  #panel[data-kind="map"] #panel-content {
    padding: 8px 8px 0;
  }
  html body #panel[data-kind="map"] .map-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  html body #panel[data-kind="map"] .map-wrap {
    grid-column: 1;
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
  }
  html body #panel .map-jump-btn {
    padding: 0 13px;
  }
  html body #panel .map-jump-btn span {
    display: none;
  }
  html body #panel .map-jump {
    width: min(240px, calc(100vw - 32px));
  }
  /* The sheet: peek shows the categories as one row of chips, half the list, drop the hits under the search while typing. */
  html body #panel .map-side {
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: 0;
    z-index: 5;
    height: 96px;
    gap: 6px;
    padding: 0 10px calc(10px + env(safe-area-inset-bottom));
    overflow: hidden;
    border-top: 1px solid var(--ui-trim);
    border-radius: 16px 16px 0 0;
    background: var(--ui-win-solid);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
    transition: height 0.2s ease;
  }
  html body #panel .map-side[data-sheet='half'] {
    height: 45dvh;
    overflow-y: auto;
  }
  html body #panel .map-side[data-sheet='drop'] {
    top: 52px;
    bottom: auto;
    left: 0;
    right: 0;
    height: auto;
    max-height: min(300px, 40dvh);
    padding-top: 6px;
    overflow-y: auto;
    border: 1px solid var(--ui-trim);
    border-radius: var(--ui-radius-win, 10px);
    transition: none;
  }
  html body #panel .map-grab {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    flex: none;
    width: calc(100% + 20px);
    height: 22px;
    min-height: 0;
    margin: 0 -10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--ui-win-solid);
  }
  html body #panel .map-grab i {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--ui-muted);
    opacity: 0.6;
  }
  html body #panel .map-side[data-sheet='drop'] .map-grab {
    display: none;
  }
  .map-cats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .map-side[data-sheet='peek'] .map-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -10px;
    padding: 0 10px 2px;
  }
  .map-side[data-sheet='peek'] .map-cats::-webkit-scrollbar {
    display: none;
  }
  html body #panel .map-cat {
    flex: none;
    width: auto;
    min-height: 40px;
    gap: 7px;
    padding: 0 12px 0 5px;
    border-radius: 999px;
  }
  html body #panel .map-cat .map-kind-dot {
    width: 28px;
    height: 28px;
  }
  #panel .map-row-acts :is(.map-show, .map-guide) {
    display: none !important;
  }
  html body #panel .map-row-acts > button {
    height: 40px;
    padding: 0 11px;
  }
  html body #panel .map-row-acts .map-go {
    display: inline-flex;
  }
}
/* ---- NPC dialogue: RS3's box over the chat. The speaker stays; the line stays; only a long list of choices scrolls.
   Choices are numbered rows. ---- */
html body #dialogue-box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 12px 12px;
}
html body #dialogue-box[hidden] {
  display: none;
}
#dialogue-box header {
  flex: none;
  min-height: 40px;
  margin: 0 -12px 10px;
  padding: 6px 6px 6px 12px;
  background: var(--ui-bar);
  border-bottom: 1px solid var(--ui-line);
}
#dialogue-box header h3 {
  flex: 1;
  margin: 0;
  font: 700 var(--ui-num, 14px) / 1.2 var(--ui-font);
  color: var(--ui-title);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
#dialogue-box header .close-button {
  position: static;
  width: 30px;
  height: 30px;
  background: transparent;
  color: var(--ui-muted);
}
#dialogue-box header :is(.portrait, .avatar-portrait) {
  width: 44px;
  height: 44px;
  margin: -2px 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ui-trim), 0 0 0 3px rgba(0, 0, 0, 0.35);
}
html body #dialogue-box .talk-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#dialogue-box .talk-body > * {
  flex: none;
}
html body #dialogue-box .talk-body > .dialogue {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#dialogue-box .dialogue-line {
  flex: none;
  font-size: 13.5px;
}
#dialogue-box .dialogue-choices {
  counter-reset: choice;
  padding-right: 2px;
}
#dialogue-box .dialogue-choices > button:nth-child(-n + 9)::before {
  counter-increment: choice;
  content: counter(choice) ".";
  min-width: 14px;
  color: var(--ui-accent);
  font-weight: 700;
}
html body #dialogue-box .dialogue-choices > button {
  flex: none;
  gap: 8px;
  min-height: 32px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ui-text);
  font: 500 12.5px / 1.3 var(--ui-font);
  display: flex;
  align-items: center;
}
html body #dialogue-box .dialogue-choices > .text-button {
  color: var(--ui-muted);
}
/* A choice that leads to a quest, a lesson, the capes or the drill carries its mark after the number. */
html body #dialogue-box .dialogue-choices > button.marked svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--ui-accent);
}
/* Rows inside a talk (lessons, teachers, capes, the trial, a quest): the shared list row, its action kept compact. */
#dialogue-box .list-row {
  padding: 3px 2px;
}
/* A talk's list (lessons, teachers, capes) scrolls; its Back stays beneath it. */
#dialogue-box .dialogue-rows {
  margin-bottom: 6px;
  padding-right: 2px;
}
#dialogue-box .list-main small {
  display: block;
  margin-top: 1px;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ui-muted);
}
html body #dialogue-box .list-row > :is(button, .pill) {
  flex: none;
  width: auto;
  min-height: 32px;
  justify-content: center;
}
html body #dialogue-box .list-row > .pill {
  min-height: 0;
}
html body #dialogue-box .list-row.task {
  margin: 0 0 8px;
  padding: 8px;
}
#dialogue-box .list-row :is(button, .pill) svg {
  width: 14px;
  height: 14px;
}
/* The drill's terms and a quest's reward: chips and one gold line instead of sentences. */
.dialogue-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.dialogue-chips .pill {
  white-space: normal;
  height: auto;
  min-height: 22px;
}
.dialogue-chips .pill :is(svg, .item-thumb) {
  flex: none;
  width: 14px;
  height: 14px;
}
.dialogue-reward {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--ui-accent);
  font: 600 12px / 1.35 var(--ui-font);
}
.dialogue-reward svg {
  flex: none;
  width: 16px;
  height: 16px;
}
/* An item spoken about: its picture and name, a press opens its card. */
html body #dialogue-box .dialogue-info {
  justify-content: flex-start;
  margin: 0 0 8px;
}
html body #dialogue-box .dialogue-info .item-thumb,
html body #dialogue-box .dialogue-info > svg:first-child {
  width: 22px;
  height: 22px;
}
html body #dialogue-box .dialogue-info > svg:last-child {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: var(--ui-muted);
}
/* ---- Item info: the picture, name and tags stay; where it comes from and what uses it scroll; the wiki at the foot. */
html body #item-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px;
  border-color: var(--ui-trim);
  max-height: min(78dvh, 560px);
}
#item-info > * {
  flex: none;
}
.ii-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-right: 32px;
}
#item-info .ii-head h3 {
  margin: 2px 0 3px;
  font: 700 14px / 1.25 var(--ui-font);
  color: var(--ui-title);
}
#item-info .ii-head p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ui-muted);
}
.ii-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 10px 0;
}
.ii-tags .pill svg {
  width: 12px;
  height: 12px;
  color: var(--ui-accent);
}
.ii-tags .pill.bad {
  color: var(--ui-bad);
  border-color: rgba(229, 138, 116, 0.4);
}
html body #item-info .ii-body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -4px 10px 0;
  padding-right: 4px;
}
:is(#item-info, .item-next-use) .ii-list {
  margin: 2px 0 10px;
  padding: 0;
  list-style: none;
}
:is(#item-info, .item-next-use) .ii-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--ui-line);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ui-text);
}
/* What it becomes next: Guide links read as part of the line, like the Guide's own links. */
:is(#item-info, .item-next-use) :is(.ii-list, .ii-links) .text-button.inline {
  display: inline;
  width: auto;
  min-height: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: var(--ui-select);
  text-decoration: underline;
  text-decoration-color: rgba(241, 217, 155, 0.4);
  text-underline-offset: 2px;
}
:is(#item-info, .item-next-use) .ii-list .text-button.inline[data-command] {
  font-weight: 500;
  color: var(--ui-muted);
}
:is(#item-info, .item-next-use) .ii-list .text-button.inline:disabled {
  text-decoration: none;
  color: var(--ui-accent);
}
:is(#item-info, .item-next-use) .ii-more > summary {
  cursor: pointer;
  padding: 4px 0;
  font-size: 11px;
  color: var(--ui-muted);
}
:is(#item-info, .item-next-use) .ii-links {
  margin: -4px 0 10px;
  font-size: 11.5px;
}
/* On a phone the open card owns the screen: the trackers (a crafting goal set from it) wait behind, as with a panel. */
@media (max-width: 700px) {
  body:has(> #item-info) #message-rail #trackers {
    visibility: hidden;
  }
}
/* Each source or use leads with its picture: the skill, the creature, the shop. */
.ii-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--ui-cell);
  color: var(--ui-accent);
}
.ii-ic > svg {
  width: 14px;
  height: 14px;
}
.ii-ic > .item-thumb {
  width: 22px;
  height: 22px;
}
/* The swap against what is worn: three tiles, old → new and the change. */
.ii-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 2px 0 10px;
}
.ii-cmp {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
}
#item-info .ii-cmp small {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ui-muted);
}
.ii-cmp b {
  font: 600 12px / 1.2 var(--ui-font);
  color: var(--ui-muted);
  white-space: nowrap;
}
.ii-cmp b i {
  font-style: normal;
  font-weight: 700;
  color: var(--ui-text);
}
.ii-cmp em {
  display: block;
  font: 700 11px / 1.2 var(--ui-font);
  font-style: normal;
}
.ii-cmp .up {
  color: #8fd46a !important;
}
.ii-cmp .down {
  color: #f08a6a !important;
}
.ii-foot {
  display: flex;
  gap: 6px;
}
#item-info .ii-foot > button {
  flex: 1;
}
#item-info > .link-row {
  width: 100%;
}
/* Make-X: the key beside the verb is a small key cap, not a gap of spaces. */
#make-x [data-make-go] .key-hint {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(30, 42, 34, 0.35);
  background: rgba(30, 42, 34, 0.12);
  font: 600 10px / 1.2 var(--ui-font);
  letter-spacing: 0.3px;
}
@media (hover: none) and (pointer: coarse) {
  #make-x [data-make-go] .key-hint {
    display: none;
  }
}
#make-x .pack-cell.short,
#make-x .pack-cell:disabled {
  opacity: 0.45;
}
/* ---- HUD: the same slate and bronze for the trackers, the bar, the orbs, the chat and every card. ---- */
html body :is(#xp-tracker, #quest, #action-bar, #chat-log, #rest-banner, #duel-hud, #chat-person, #kout-sit, #protocol-sit, #toasts .toast) {
  background: var(--ui-win);
  border: 1px solid var(--ui-trim);
  box-shadow: var(--ui-frame);
  font-family: var(--ui-font);
  color: var(--ui-text);
}
html body :is(.orb, #compass) {
  background: var(--ui-win);
  border: 1px solid var(--ui-trim);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.1), 0 4px 12px rgba(6, 14, 11, 0.35);
  color: var(--ui-accent);
}
html body #minimap {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ui-trim), 0 0 0 4px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(6, 14, 11, 0.4);
}
/* XP tracker: the skill's picture, its name and level, a thin bar and what is left to the next level; a gain rises and
   fades beside it. */
#trackers > #xp-tracker {
  pointer-events: none;
  padding: 7px 10px 7px;
  border-radius: var(--ui-radius-win);
}
#xp-tracker .row {
  align-items: center;
  gap: 6px;
  font: 600 12px / 1.2 var(--ui-font);
}
/* The narrow phone column: the gain keeps its width and the skill line gives way, so "+5.6 XP" is never cut off. */
#xp-tracker .row > strong {
  min-width: 0;
}
#xp-tracker .row > .gain {
  flex: none;
}
#xp-tracker strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
#xp-tracker strong b {
  color: var(--ui-stack);
  text-shadow: 1px 1px 0 #000;
}
#xp-tracker .xp-art {
  width: 22px;
  height: 22px;
}
#xp-tracker .gain {
  color: var(--ui-select);
  font-weight: 700;
  white-space: nowrap;
  animation: xp-drop 2.4s ease-out both;
}
@keyframes xp-drop {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  12% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
#xp-tracker .bar {
  height: 3px;
  margin: 5px 0 4px;
  background: rgba(0, 0, 0, 0.45);
}
#xp-tracker .bar i {
  background: var(--ui-xp);
}
html body #xp-tracker small {
  font: 500 10px / 1.2 var(--ui-font);
  letter-spacing: 0;
  color: var(--ui-muted);
  opacity: 1;
}
/* Tutorial tracker: RS3's task tracker, one compact card (or a single row) that steps aside while a window is open. */
#trackers > #quest {
  width: auto;
  max-width: none;
  padding: 4px 4px 8px 10px;
  border-radius: var(--ui-radius-win);
  max-height: none;
  overflow: visible;
}
#trackers > #quest.collapsed {
  padding: 4px 4px 4px 10px;
}
body.panel-open #quest,
body:has(#mirror-sheet:not([hidden])) #quest {
  display: none;
}
#quest .quest-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* The step's painted card (640×360 at 2×) under its title; it never widens the card. */
#quest .quest-art {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 320px;
  height: 72px;
  aspect-ratio: auto;
  object-fit: cover;
  margin: 6px 0;
  border-radius: 8px;
  border: 1px solid var(--ui-slot-line);
  background: var(--ui-cell);
}
html body #quest .quest-toggle {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  background: transparent;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 4px 0 0;
  color: var(--ui-text);
}
#quest .quest-title {
  flex: 1;
  min-width: 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: clip;
  font: 600 14px / 1.3 var(--ui-font);
  color: var(--ui-title);
}
html body #quest .quest-toggle[aria-expanded] > svg {
  width: 12px;
  height: 12px;
  color: var(--ui-muted);
  transform: none;
}
.quest-step {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  border: 1px solid var(--ui-slot-line);
  background: var(--ui-cell);
  font: 700 10px / 1 var(--ui-font);
  color: var(--ui-select);
  font-variant-numeric: tabular-nums;
}
.quest-step svg {
  width: 11px;
  height: 11px;
}
html body #quest .quest-exit {
  flex: none;
  width: 30px;
  min-height: 30px;
  height: 30px;
  justify-content: center;
  padding: 0;
  border-radius: var(--ui-radius);
  color: var(--ui-muted);
}
#quest .quest-exit svg {
  width: 13px;
  height: 13px;
}
@media (hover: hover) {
  details.fold > summary:hover {
    background: var(--ui-cell-hover);
  }
  html body .orb:hover {
    color: var(--ui-select);
    border-color: var(--ui-trim-hi);
  }
  html body #quest :is(.quest-toggle, .quest-exit, .quest-go:not(.main)):hover {
    background: var(--ui-cell-hover);
    color: var(--ui-text);
  }
}
html body #quest p {
  margin: 2px 6px 6px 0;
  font: 400 13px / 1.4 var(--ui-font);
  color: var(--ui-muted);
}
html body #quest .quest-go {
  min-height: 28px;
  padding: 0 6px 0 0;
  border-radius: var(--ui-radius);
  color: var(--ui-accent);
  font: 600 11.5px / 1.2 var(--ui-font);
}
#quest .quest-go svg {
  width: 13px;
  height: 13px;
}
/* The action has the strongest surface; the illustration follows the instructions. */
html body #quest .quest-go.main {
  width: calc(100% - 6px);
  min-height: 40px;
  margin: 2px 6px 6px 0;
  padding: 6px 10px;
  justify-content: space-between;
  border: 1px solid var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-win-solid);
  font-size: 13px;
}
/* Skip? Two buttons side by side; Keep going is the framed one. */
html body #quest .quest-pair {
  display: flex;
  gap: 6px;
  margin-right: 6px;
}
html body #quest .quest-pair .quest-go {
  flex: 1;
  width: auto;
  margin: 0;
  justify-content: center;
}
html body #quest .quest-pair .quest-go:not(.main) {
  border: 1px solid var(--ui-line);
  color: var(--ui-muted);
}
/* A phone's first steps: the five gestures as small chips. */
#quest .quest-touch {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 4px;
  margin: 0 6px 6px 0;
}
#quest .quest-touch span {
  flex-direction: column;
  padding: 3px 6px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  font: 500 10.5px / 1.25 var(--ui-font);
  color: var(--ui-muted);
}
#quest .quest-touch b {
  color: var(--ui-text);
  font-weight: 700;
}
/* What next: each goal is one row (its picture, the goal, who and where) that walks you there. */
html body #quest .quest-next {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 6px);
  min-height: 40px;
  margin: 0 6px 4px 0;
  padding: 4px 8px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  color: var(--ui-text);
  text-align: left;
}
#quest .quest-next > :is(svg, .item-thumb):first-child {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--ui-accent);
}
#quest .quest-next > span {
  flex: 1;
  min-width: 0;
}
#quest .quest-next b {
  display: block;
  font: 600 11.5px / 1.25 var(--ui-font);
}
#quest .quest-next small {
  display: block;
  font: 400 10.5px / 1.3 var(--ui-font);
  color: var(--ui-muted);
}
#quest .quest-next > svg:last-child {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--ui-accent);
}
html body #quest .quest-next-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-muted);
  font: 600 11px var(--ui-font);
}
#quest .quest-next-link svg {
  width: 11px;
  height: 11px;
}
html body #quest .quest-dots {
  margin: 4px 6px 0 0;
  gap: 3px;
}
html body #quest .quest-dots i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
}
html body #quest .quest-dots i.done {
  background: var(--ui-xp);
}
html body #quest .quest-dots i.now {
  background: rgba(217, 185, 120, 0.45);
}
@media (max-width: 700px) and (orientation: portrait) {
  #trackers > #quest.compact {
    width: 100%;
    padding: 8px;
  }
  html body #quest.compact .quest-title {
    display: block;
    margin: 6px 0;
    overflow: visible;
    -webkit-line-clamp: unset;
  }
  html body #quest.compact .quest-go.main {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 6px 8px;
    justify-content: center;
    gap: 6px;
    text-align: center;
    overflow-wrap: anywhere;
  }
  html body #panel[data-kind="wiki"]:has(.tutorial-guide) {
    width: calc(100vw - 20px);
  }
}
#panel .tutorial-guide {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
#panel .tutorial-guide .quest-step {
  align-self: flex-start;
}
#panel .tutorial-guide h3.quest-title {
  margin: 0;
  font: 700 16px / 1.3 var(--ui-font);
  color: var(--ui-title);
}
#panel .tutorial-guide p {
  margin: 0;
  font: 400 14px / 1.4 var(--ui-font);
  color: var(--ui-muted);
}
#panel .tutorial-guide .quest-art {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: var(--ui-radius);
}
#panel .tutorial-guide .quest-go.main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-win-solid);
  font: 600 14px / 1.4 var(--ui-font);
}
#panel .tutorial-guide .quest-go.main svg {
  width: 16px;
  height: 16px;
}
#panel .tutorial-guide :is(.quest-touch, .quest-guide-controls, .quest-pair) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#panel .tutorial-guide .quest-touch span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font: 400 12px / 1.4 var(--ui-font);
  color: var(--ui-muted);
}
#panel .tutorial-guide .quest-touch .touch-art {
  width: 24px;
  height: 24px;
}
#panel .tutorial-guide .quest-touch b {
  color: var(--ui-text);
}
#panel .tutorial-guide :is(.quest-guide-controls, .quest-pair) button {
  flex: 1 1 auto;
  width: auto;
  min-height: 44px;
  margin: 0;
  font-size: 12px;
}
/* Toasts: a plain line; a level-up card with the skill's picture and a gold edge; a drop with its item. */
html body #toasts .toast {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
}
html body #toasts .toast.error {
  border-color: rgba(200, 70, 62, 0.75);
  color: #f3c2b6;
}
html body #toasts .toast:is(.level, .drop) {
  display: flex;
  align-items: center;
  border-color: var(--ui-trim-hi);
}
.toast .toast-art,
.toast .toast-icon {
  width: 42px;
  height: 42px;
  flex: none;
}
.toast .toast-icon {
  display: grid;
  place-items: center;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-slot-line);
  background: var(--ui-cell);
}
.toast .toast-icon .item-thumb {
  width: 34px;
  height: 34px;
}
.toast small {
  display: block;
  font: 700 9.5px / 1.2 var(--ui-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ui-accent);
}
.toast strong {
  display: block;
  font: 700 14px / 1.3 var(--ui-font);
  color: var(--ui-title);
}
.toast.level span {
  display: block;
  font-size: 11px;
  color: var(--ui-muted);
}
/* Out of a fight the bar has five fixed slots (actionbar.js); an unused one is an empty frame of the same size. */
html body #action-bar {
  border-radius: var(--ui-radius-win);
}
html body #action-bar .bar-slots {
  justify-content: flex-start;
  border-radius: var(--ui-radius);
}
html body #action-bar .bar-slot.empty {
  background: rgba(0, 0, 0, 0.24);
  pointer-events: none;
}
html body #action-bar .bar-slot {
  border-color: var(--ui-slot-line);
}
/* A full fight bar (ten slots or more) narrows its cells so it stays one row between the chat and the tabs. */
@media (min-width: 701px) {
  html body #action-bar .bar-slots:has(> .bar-slot:nth-child(10)) {
    gap: 3px;
    background: none;
  }
  #action-bar .bar-slots:has(> .bar-slot:nth-child(10)) > .bar-slot {
    width: 42px;
    height: 42px;
  }
  #action-bar .bar-slots:has(> .bar-slot:nth-child(10)) > .bar-slot svg {
    width: 22px;
    height: 22px;
  }
  #action-bar .bar-slots:has(> .bar-slot:nth-child(12)) > .bar-slot {
    width: 38px;
    height: 38px;
  }
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  /* One bottom anchor in every state, beside the 44px tab column. */
  html body #action-bar {
    --skill-bar-width: auto;
    left: max(var(--hud-m), env(safe-area-inset-left));
    right: calc(max(var(--hud-m), env(safe-area-inset-right)) + 54px);
    transform: none;
    margin: 0;
    bottom: calc(var(--hud-m) + var(--safe-bottom));
    width: auto;
    max-width: none;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--ui-trim), var(--ui-frame);
    padding: 6px 8px 8px;
    gap: 4px;
  }
  /* Chat is secondary: above the idle bar, and open to talk during work. A fight hides it (including its unread badge). */
  html body #chat {
    bottom: calc(260px + var(--safe-bottom));
  }
  /* A skilling bar's height varies (context buttons, a wrapped head, Interface size), so chat sits 8 px above its top,
     never below its idle spot. Without anchor positioning it clears a 213 px bar (two buttons, wrapped head) instead. */
  html body.skilling #chat {
    bottom: calc(max(260px, 8px + 228px * var(--ui-scale, 1)) + var(--safe-bottom));
  }
  @supports (anchor-name: --a) {
    html body #action-bar {
      anchor-name: --action-bar;
    }
    html body.skilling #chat {
      bottom: max(calc(260px + var(--safe-bottom)), calc(anchor(--action-bar top, 0px) + 8px));
    }
  }
  body.fighting #chat-button {
    display: none;
  }
  html body #action-bar .bar-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 4px;
    min-width: 0;
    min-height: 44px;
    padding: 14px 0;
    overflow: visible;
    background: none;
  }
  html body #action-bar .bar-slot {
    justify-self: center;
  }
  /* Meters and Stop share a row; the large target has room for the full lead-in ring on every side. */
  html body #action-bar .skill-work {
    grid-template-columns: minmax(0, 1fr);
  }
  html body #action-bar .skill-head {
    flex-wrap: wrap;
    gap: 2px 8px;
  }
  html body #action-bar .skill-meters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
  html body #action-bar .skill-tap {
    margin: 6px 0 2px;
  }
  html body #action-bar .bowl-stop {
    min-height: 44px;
  }
}
html body #action-bar .lp {
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
/* Choose Option: compact rows for a mouse (RS3), 44 px only for touch; a gold title bar. */
html body #world-menu {
  padding: 0 0 4px;
  min-width: 180px;
  border-color: var(--ui-trim);
  overflow-x: hidden;
}
html body #world-menu .menu-head {
  margin: 0 0 3px;
  padding: 6px 10px;
  background: var(--ui-bar), rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--ui-line);
  font: 700 11px / 1.2 var(--ui-font);
  letter-spacing: 0.3px;
  color: var(--ui-title);
}
html body #world-menu button {
  margin: 0 4px;
}
@media (hover: hover) and (pointer: fine) {
  html body #world-menu button {
    min-height: 26px;
    padding: 4px 10px;
    font-size: 12px;
  }
}
/* Docked cards (a player's card, Kout's and the Signal Room's sit prompts) sit above the action bar, centred, never
   over the interface window; on a phone, above the open window. */
html body :is(#chat-person, #kout-sit, #protocol-sit) {
  left: 50%;
  right: auto;
  bottom: calc(118px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(290px, calc(100vw - 24px));
  max-height: calc(100dvh - 260px);
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: var(--ui-radius-win);
  z-index: var(--z-card, 8);
}
/* Use the space above the dock before scrolling a player's expanded share card. */
html body #chat-person {
  max-height: calc(100dvh - 150px - var(--safe-bottom));
  scrollbar-width: thin;
}
html body :is(#chat-person, #kout-sit, #protocol-sit) h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  font: 700 15px / 1.25 var(--ui-font);
  color: var(--ui-title);
}
html body :is(#chat-person, #kout-sit, #protocol-sit) .eyebrow {
  font: 700 9.5px / 1.4 var(--ui-font);
  letter-spacing: 1px;
  color: var(--ui-accent);
}
html body :is(#chat-person, #kout-sit, #protocol-sit) p {
  font-size: 11px;
  line-height: 1.45;
  color: var(--ui-muted);
}
html body :is(#chat-person, #kout-sit, #protocol-sit) button {
  min-height: 34px;
  margin-top: 4px;
  border-radius: var(--ui-radius);
  font: 600 12px var(--ui-font);
}
html body :is(#chat-person, #kout-sit, #protocol-sit) :is(.secondary-button, .secondary) {
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  color: var(--ui-text);
}
html body :is(#chat-person, #kout-sit, #protocol-sit) .primary {
  background: var(--ui-accent);
  border: 0;
  color: var(--ui-on-accent);
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body :is(#chat-person, #kout-sit, #protocol-sit) {
    bottom: calc(66px + var(--safe-bottom));
    max-height: calc(100dvh - 220px);
  }
  body.iface-open :is(#chat-person, #kout-sit, #protocol-sit) {
    bottom: calc(16px + min(var(--iface-h-phone), 100dvh - 170px) + var(--safe-bottom));
    max-height: calc(100dvh - min(var(--iface-h-phone), 100dvh - 170px) - 80px);
  }
}
/* The rest banner and the duel score: Inter, gold small caps, tabular numbers. */
html body #duel-hud .score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 16px / 1.2 var(--ui-font);
  color: var(--ui-text);
}
html body #duel-hud .score > b {
  color: var(--ui-muted);
}
html body #duel-hud .duel-hearts {
  display: inline-flex;
  gap: 2px;
}
html body #duel-hud .duel-hearts i {
  display: grid;
  color: var(--ui-muted);
}
html body #duel-hud .duel-hearts i.on {
  color: #e0483a;
}
html body #duel-hud .duel-hearts svg {
  width: 18px;
  height: 18px;
}
#duel-hud .duel-hearts i.on svg {
  fill: currentColor;
}
html body #rest-banner {
  width: max-content;
  max-width: 90vw;
  font-size: 13px;
  line-height: 1.3;
}
/* (Removed: the notice lives bottom-left now, far from the duel score and echo banner, so no duel offset is needed.
   The old top offset outranked the bottom-left rule and stretched the notice across the screen.) */
html body #rest-banner > span {
  flex: 1;
}
html body #rest-banner .rest-art {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--gold);
}
html body #rest-banner .rest-left {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--ui-cell);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
html body #rest-banner button {
  color: var(--ui-on-accent);
  font-weight: 600;
}
/* Skilling uses the action bar: two labelled meters and one fixed Space slot. The seam lights the same target. */
html body #action-bar.skilling {
  width: var(--skill-bar-width, 320px);
  max-width: calc((100vw - max(var(--hud-m), env(safe-area-inset-left)) - max(var(--hud-m), env(safe-area-inset-right))) / var(--ui-scale, 1));
}
#action-bar .skill-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px;
  gap: 6px;
  min-width: 0;
}
#action-bar .skill-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.3;
}
#action-bar .skill-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ui-title);
}
#action-bar .skill-hot {
  flex: none;
  font-style: normal;
  font-weight: 700;
  color: var(--ui-muted);
}
#action-bar .skill-hot.on {
  color: #ffcf5a;
  text-shadow: 0 0 6px rgba(255, 190, 60, 0.6);
}
.lp-buff.lp-hot {
  color: #ffcf5a;
  font-size: 12px;
  line-height: 1;
}
/* An aside wider than the whole bar ("+1 glimmer · Afterglow in the dark green" on a narrow phone) wraps inside it. */
#action-bar .skill-head > span {
  flex: none;
  max-width: 100%;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}
#action-bar .skill-meters {
  display: grid;
  align-content: center;
  gap: 6px;
}
#action-bar .skill-tap {
  width: 124px;
  height: 72px;
  min-height: 72px;
  grid-template-rows: 24px 14px 12px;
  gap: 3px;
  align-content: center;
  padding: 4px 6px 8px;
  border-radius: var(--ui-radius);
  touch-action: manipulation;
}
#action-bar .skill-tap > :is(.item-thumb, svg) {
  width: 24px;
  height: 24px;
}
#action-bar .skill-tap .bar-word {
  position: static;
  color: inherit;
  font-size: 12px;
  line-height: 14px;
  text-shadow: none;
}
/* The gathering bar's context slots (skill ideas 2, game/ui/actionbar.js gatherSlots): at most two small buttons under
   the meters — Stop, the next sheep or patch, the rod or the rise — or, for a ripe pick, the two specimens. */
#action-bar .skill-ctxs {
  display: flex;
  gap: 6px;
  min-width: 0;
}
#action-bar .skill-ctx {
  flex: 1 1 0;
  min-width: 0;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--ui-trim);
  border-radius: 4px;
  background: var(--ui-cell);
  color: var(--ui-text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
#action-bar .skill-ctx > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#action-bar .skill-ctx.rise {
  border-color: #ffd27a;
  color: #ffe39a;
}
/* Two specimens: the ripe one full and upright, the other paler, smaller and drooping; the marked one gold-edged. */
#action-bar .skill-ctx.specimen {
  flex-direction: column;
  gap: 1px;
  min-height: 44px;
  padding: 3px 4px 2px;
  font-size: 10px;
  line-height: 12px;
}
#action-bar .skill-ctx.specimen > :is(.item-thumb, svg) {
  flex: none;
  width: 26px;
  height: 26px;
}
#action-bar .skill-ctx.unripe > :is(.item-thumb, svg) {
  filter: saturate(0.25) brightness(1.15) sepia(0.35) hue-rotate(35deg);
  transform: scale(0.78) rotate(-14deg);
  opacity: 0.85;
}
#action-bar .skill-ctx.specimen.on {
  border-color: #ffd27a;
  background: var(--ui-cell-on, var(--ui-cell));
  box-shadow: 0 0 0 1px #ffd27a, 0 0 8px rgba(255, 210, 122, 0.45);
  color: #ffe39a;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body #action-bar .skill-ctxs {
    grid-column: 1 / -1;
  }
  html body #action-bar .skill-ctx {
    min-height: 40px;
  }
}
/* Elowen's bone bowl (features/chapel.js bowlBar): Stop sits under the offering meter in the skilling layout. */
#action-bar .bowl-stop {
  width: 100%;
  padding: 0;
  border: 1px solid var(--ui-trim);
  font: inherit;
  cursor: pointer;
}
#action-bar .bowl-stop > span {
  justify-content: center;
  font-weight: 500;
}
/* The hearth bars (skill ideas 2 F1-F3: features/firemaking.js fireBar, features/chapel.js bowlBar and cupBar): the
   skilling layout, with at most two small context slots in one row under the meters. */
#action-bar .hearth-slots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}
html body #action-bar .hearth-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  height: 24px;
  min-width: 0;
  padding: 0 4px;
  font-size: 11px;
}
#action-bar .hearth-slot :is(.item-thumb, svg) {
  flex: none;
  width: 16px;
  height: 16px;
}
#action-bar .hearth-slot .bar-word {
  position: static;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 600;
}
#action-bar .hearth-slot kbd {
  display: none;
}
#action-bar .hearth-slot .cnt {
  position: static;
  order: 3;
}
#action-bar .hearth-slot:disabled,
#action-bar .hearth-work .skill-tap:disabled {
  opacity: 0.55;
  cursor: default;
}
/* The watched fire's burn track: the flame's age, a mark at the real half burn; the coal turn's zone sits after it. */
#action-bar .fire-burn .zt-fill {
  background: linear-gradient(#b8612f, #87401f);
}
#action-bar .fire-burn.ash .zt-fill {
  background: linear-gradient(#7a736a, #5b5650);
}
#action-bar .fire-burn > s {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  text-decoration: none;
  pointer-events: none;
}
#action-bar .fire-burn > .fire-half {
  width: 2px;
  margin-left: -1px;
  background: #ffe6a3;
  box-shadow: 0 0 4px rgba(255, 210, 122, 0.8);
}
/* Desktop: the hearth bars' worded context slots need a little more room than the standard 320 px bar (at Interface
   130% it still clears the Interface tabs on a 1280 px window). */
@media (min-width: 701px) and (min-height: 501px) {
  html body #action-bar.skilling:has(.hearth-slots) {
    --skill-bar-width: 344px;
  }
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body #action-bar .hearth-slots {
    grid-column: 1 / -1;
  }
  html body #action-bar .hearth-slot {
    height: 40px;
    justify-self: stretch;
    border-radius: var(--ui-radius);
  }
  /* The watched fire has one strip: it takes the whole row. */
  html body #action-bar .hearth-watch .fire-burn {
    grid-column: 1 / -1;
  }
}
/* The Looking glass window. */
html body .mirror-card {
  background: var(--ui-win);
  border: 1px solid var(--ui-trim);
  box-shadow: var(--ui-frame);
  border-radius: var(--ui-radius-win);
  color: var(--ui-text);
}
html body .look-roll {
  color: var(--ui-accent);
}
html body .body-tile {
  min-height: 64px;
  font-size: 13px;
  border-radius: 8px;
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  color: var(--ui-text);
}
html body .body-tile[aria-pressed="true"] {
  background: var(--ui-cell-on);
  border-color: var(--ui-select);
  color: var(--ui-select);
}

/* ---- Loading: the road into the Grove behind the emblem and wordmark, and a measured bar (index.html GroveBoot). The
   bar is bright gold on a near-black track inside a light frame, so it reads on any part of the painting. ---- */
#loading {
  position: fixed;
  inset: 0;
  z-index: var(--z-fullscreen, 30);
  display: grid;
  place-items: start center;
  /* The emblem, wordmark and bar sit in the sky, above the traveller on the road. */
  padding: max(11vh, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  color: var(--ui-text);
  background:
    radial-gradient(ellipse 50% 45% at 50% 34%, rgba(14, 22, 19, 0.8), rgba(14, 22, 19, 0.45) 62%, rgba(14, 22, 19, 0.15)),
    url(art/ui/brand/loading.webp) center / cover no-repeat,
    url(art/brand/loading-wide.jpg) center / cover no-repeat,
    var(--ui-win-solid, #17211d);
  transition: opacity 0.4s;
}
@media (orientation: portrait) {
  #loading {
    padding-top: max(14vh, env(safe-area-inset-top));
    background:
      radial-gradient(ellipse 80% 30% at 50% 28%, rgba(14, 22, 19, 0.8), rgba(14, 22, 19, 0.45) 62%, rgba(14, 22, 19, 0.15)),
      url(art/ui/brand/loading-portrait.webp) center / cover no-repeat,
      url(art/brand/loading-tall.jpg) center / cover no-repeat,
      var(--ui-win-solid, #17211d);
  }
}
#loading .loading-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(360px, 100%);
}
#loading .brand-mark {
  width: 120px;
  height: 120px;
  background-image: url(art/brand/emblem-256.png);
  filter: drop-shadow(0 6px 18px rgba(6, 12, 10, 0.6));
}
#loading h1 {
  width: min(340px, 82vw);
  aspect-ratio: 1024 / 384;
  margin: 8px 0 22px;
  font-size: 0;
  color: transparent;
  background: url(art/ui/brand/logo.png) center / contain no-repeat;
  filter: drop-shadow(0 4px 14px rgba(6, 12, 10, 0.65));
}
#loading .load-bar {
  width: min(300px, 78vw);
  height: 16px;
  padding: 3px;
  border-radius: 999px;
  background: #0b110e;
  border: 2px solid #f4e6bf;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 6px 20px rgba(0, 0, 0, 0.5);
}
#loading .load-fill {
  display: block;
  width: 0;
  min-width: 6px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0bf, #f5c04a 45%, #d99a22);
  box-shadow: 0 0 10px rgba(255, 196, 80, 0.6);
  transition: width 0.3s ease-out;
}
#loading .load-stage {
  min-height: 1.3em;
  margin: 12px 0 0;
  font: 600 13px/1.3 var(--ui-font);
  letter-spacing: 0.3px;
  color: #f6eed8;
  text-shadow: 0 1px 6px rgba(6, 12, 10, 0.9);
}
@media (max-height: 500px) {
  #loading {
    padding-top: 6vh;
  }
  #loading .brand-mark {
    width: 72px;
    height: 72px;
  }
  #loading h1 {
    width: min(240px, 60vw);
    margin-bottom: 16px;
  }
}

/* ---- Welcome: one centred card, one door. Name + Password + Continue; the same card then says what that name is (new,
   taken) or opens the creator. While the body is made the card steps right (a bottom sheet on a phone) so the figure
   stands in the open (creator.js frames it there). The HUD waits behind it until play begins. ---- */
body:has(> #welcome:not([hidden])) :is(#header, #map-cluster) {
  visibility: hidden;
}
#welcome {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: flex;
  /* The card's top stays put from step to step (its logo never jumps); a taller step grows downwards. */
  align-items: flex-start;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top), calc(50dvh - 290px)) max(16px, env(safe-area-inset-right))
    calc(28px + var(--safe-bottom, 0px)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(10, 18, 15, 0.55), rgba(10, 18, 15, 0.25));
  overflow: hidden;
}
#welcome[hidden] {
  display: none;
}
html body #welcome .welcome-card {
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 28px 22px;
  background: var(--ui-win);
  border: 1px solid var(--ui-trim);
  box-shadow: var(--ui-frame);
  border-radius: 14px;
  color: var(--ui-text);
  font-family: var(--ui-font);
}
#welcome .welcome-brand {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 -28px 2px;
  padding-top: 10px;
  background: radial-gradient(ellipse 70% 90% at 50% 30%, rgba(255, 226, 160, 0.12), transparent 70%);
}
#welcome .welcome-art {
  width: min(260px, 70%);
  aspect-ratio: 2 / 1;
  background: url(art/brand/welcome-header.png) center / contain no-repeat;
}
#welcome .welcome-logo {
  width: 210px;
  aspect-ratio: 1024 / 384;
  margin-top: -26px;
  background: url(art/ui/brand/logo.png) center / contain no-repeat;
  filter: drop-shadow(0 3px 8px rgba(6, 12, 10, 0.7));
}
#welcome .welcome-pane {
  display: flex;
  flex-direction: column;
}
#welcome .welcome-pane[hidden] {
  display: none;
}
#welcome .welcome-lede {
  margin: 4px 0 16px;
  text-align: center;
  font-size: 14px;
  color: var(--ui-muted);
}
#welcome label,
#welcome #body-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.2px;
  color: var(--ui-title);
}
#welcome input {
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 12px 14px;
  font: 16px var(--ui-font);
  color: var(--ui-text);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(235, 225, 190, 0.22);
  border-radius: 8px;
}
#welcome input::placeholder {
  color: rgba(239, 232, 214, 0.42);
}
#welcome input:focus {
  outline: none;
  border-color: var(--ui-trim-hi);
  box-shadow: 0 0 0 3px rgba(217, 185, 120, 0.25);
}
#welcome input[aria-invalid="true"] {
  border-color: var(--ui-bad);
}
#welcome .field-msg {
  min-height: 0;
  margin: 6px 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ui-bad);
}
#welcome .field-msg:empty {
  margin: 0 0 14px;
}
#welcome #password-field[hidden] {
  display: none;
}
html body #welcome .welcome-go {
  display: block;
  text-align: center;
  min-height: 52px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ecd08e, var(--ui-accent));
  color: var(--ui-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  touch-action: manipulation;
}
html body #welcome .welcome-go:hover:not(:disabled) {
  background: linear-gradient(180deg, #f3daa0, #e2c486);
}
html body #welcome .welcome-go:focus-visible,
#welcome .welcome-second:focus-visible,
#welcome .welcome-link:focus-visible {
  outline: 2px solid var(--ui-select);
  outline-offset: 3px;
}
html body #welcome .welcome-go:disabled {
  opacity: 0.75;
  cursor: progress;
}
#welcome .welcome-second {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  border: 1px solid rgba(235, 225, 190, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ui-text);
  font: 600 15px var(--ui-font);
  cursor: pointer;
  touch-action: manipulation;
}
#welcome .welcome-second:hover {
  background: rgba(255, 255, 255, 0.09);
}
#welcome .welcome-link {
  align-self: center;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 12px;
  background: none;
  color: var(--ui-accent);
  font: 500 14px var(--ui-font);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(217, 185, 120, 0.45);
  cursor: pointer;
}
#welcome h3 {
  margin: 6px 0 8px;
  text-align: center;
  font: 650 21px/1.3 var(--ui-font);
  color: var(--ui-text);
  overflow-wrap: anywhere;
}
#welcome h3 b {
  color: var(--ui-title);
  font-weight: 750;
}
#welcome .welcome-note {
  margin: 0 0 12px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ui-muted);
}
#welcome .welcome-note b {
  color: var(--ui-text);
}
#welcome .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#welcome h3:focus {
  outline: none;
}
#welcome [data-pane="key"] h3 {
  margin-bottom: 14px;
}
/* The create step: the card holds the body choice, the look rows (the one scrolling region) and a fixed foot. */
/* Once a body is chosen (creator.js adds .creating) the card steps aside for the figure. */
#welcome[data-step="create"] {
  align-items: center;
  padding-top: max(16px, env(safe-area-inset-top));
}
#welcome[data-step="create"].creating {
  justify-content: flex-end;
  padding-right: max(24px, 4vw);
  background: linear-gradient(90deg, transparent 35%, rgba(14, 33, 28, 0.25));
  cursor: grab;
}
#welcome[data-step="create"] .welcome-card {
  width: 380px;
  max-height: 100%;
  overflow: hidden;
  padding-top: 18px;
  cursor: auto;
}
#welcome[data-step="create"] .welcome-brand {
  display: none;
}
#welcome [data-pane="create"] {
  flex: 1 1 auto;
  min-height: 0;
}
#welcome [data-pane="create"] h3 {
  margin: 0 0 10px;
  text-align: left;
}
#welcome [data-pane="create"] .body-row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
}
#welcome [data-pane="create"] .body-row > * {
  flex: none;
}
#welcome #body-label {
  margin-bottom: 8px;
}
#welcome [data-pane="create"] #creator-sheet {
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 10px 0 0;
  border-top: 1px solid var(--ui-line);
}
#welcome .welcome-foot {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-line);
  margin-top: 8px;
}
#welcome .welcome-foot .field-msg {
  grid-column: 1 / -1;
  margin: 0;
}
#welcome .welcome-foot .field-msg:empty {
  display: none;
}
html body #welcome .welcome-foot .welcome-go {
  margin-top: 0;
}
html body #welcome .welcome-go[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}
#welcome .welcome-foot .welcome-second {
  width: auto;
  min-height: 52px;
  margin-top: 0;
  padding: 0 20px;
}
#welcome .look-row small {
  font-size: 12px;
  white-space: nowrap;
  color: var(--ui-muted);
}
/* Once a body is picked the tiles shrink to a one-line choice and the look rows get the room. */
#welcome.creating #body-label {
  display: none;
}
#welcome.creating .body-tile {
  flex-direction: row;
  gap: 8px;
  min-height: 46px;
}
#welcome.creating .body-tile .glyph {
  width: 28px;
  height: 28px;
}
#welcome .look-row {
  margin-top: 8px;
}
#welcome .look-part {
  gap: 8px;
  margin: 6px 0 0;
}
#welcome .look-arrow {
  width: 40px;
  min-height: 40px;
}
/* Label and count on one line, the choice under them. */
#welcome .look-name {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 6px;
  font-size: 12px;
  line-height: 1.3;
}
#welcome .look-name i {
  order: 1;
  font-size: 11px;
}
/* Swatch strips scroll sideways: the right edge fades so a cut swatch reads as "more", and the end clears the fade. */
#welcome .look-swatches {
  gap: 8px;
  padding: 6px 28px 6px 5px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
}
#welcome .look-swatch {
  width: 38px;
  height: 38px;
}
#welcome .look-arrow,
#welcome .look-roll {
  background: var(--ui-cell);
  border-color: var(--ui-line);
  color: var(--ui-text);
}
#welcome .look-roll {
  min-height: 40px;
  white-space: nowrap;
}
#welcome .body-tile:focus-visible {
  outline: 2px solid var(--ui-select);
  outline-offset: 3px;
}
#welcome .look-roll:disabled {
  opacity: 0.45;
}
#welcome :is(.look-name, .look-name i) {
  color: var(--ui-muted);
}
#welcome .look-name b {
  order: 2;
  flex-basis: 100%;
  font-size: 15px;
  color: var(--ui-text);
  font-family: var(--ui-font);
}
#welcome .look-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--ui-win-solid), 0 0 0 4px var(--ui-accent);
}
/* A phone held upright: the card fills the width; the creator is a bottom sheet under the figure. */
@media (max-width: 700px) and (orientation: portrait), (max-width: 700px) and (min-height: 501px) {
  html body #welcome .welcome-card {
    padding: 0 20px 18px;
  }
  #welcome .welcome-brand {
    margin: 0 -20px 2px;
  }
  #welcome[data-step="create"].creating {
    align-items: flex-end;
    justify-content: center;
    padding: 0 10px calc(26px + var(--safe-bottom, 0px));
    background: linear-gradient(180deg, transparent 40%, rgba(14, 33, 28, 0.3));
  }
  #welcome[data-step="create"] .welcome-card {
    width: 100%;
    max-width: 440px;
    max-height: 60dvh;
    padding: 14px 16px 12px;
  }
  #welcome [data-pane="create"] h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  #welcome:not(.creating) .body-tile {
    min-height: 56px;
  }
  #welcome .look-row small {
    display: none;
  }
}
/* Short screens (a phone on its side, a small laptop window): the painting steps aside, the wordmark stays. */
@media (max-height: 640px) {
  #welcome .welcome-art {
    display: none;
  }
  #welcome .welcome-logo {
    width: 170px;
    margin: 12px 0 0;
  }
  #welcome .welcome-lede {
    margin-bottom: 10px;
  }
  #welcome input {
    min-height: 46px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  #welcome {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: calc(18px + var(--safe-bottom, 0px));
  }
  #welcome .welcome-lede {
    display: none;
  }
  html body #welcome .welcome-card {
    width: min(540px, 100%);
    padding-bottom: 14px;
  }
  #welcome .welcome-logo {
    width: 150px;
    margin-top: 8px;
  }
  /* On its side Name and Password sit side by side, so Continue stays in view even with the keyboard up. */
  #welcome [data-pane="sign"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }
  #welcome [data-pane="sign"]:has(> #password-field[hidden]) {
    grid-template-columns: 1fr;
  }
  #welcome [data-pane="sign"] > :is(label, input, .field-msg) {
    grid-column: 1;
  }
  #welcome [data-pane="sign"] > label {
    grid-row: 1;
  }
  #welcome [data-pane="sign"] > input {
    grid-row: 2;
  }
  #welcome [data-pane="sign"] > .field-msg {
    grid-row: 3;
  }
  #welcome #password-field {
    display: contents;
  }
  #welcome #password-field > * {
    grid-column: 2;
  }
  #welcome #password-field > label {
    grid-row: 1;
  }
  #welcome #password-field > input {
    grid-row: 2;
  }
  #welcome #password-field > .field-msg {
    grid-row: 3;
  }
  #welcome [data-pane="sign"] > :is(.welcome-go, .welcome-link) {
    grid-column: 1 / -1;
  }
  #welcome .field-msg:empty {
    margin-bottom: 10px;
  }
  #welcome .welcome-link {
    min-height: 40px;
    margin-top: 2px;
  }
  /* The create step: a compact head, and the look rows keep their own scroll between it and the foot. */
  #welcome[data-step="create"] .welcome-card {
    max-height: 100%;
    padding: 12px 18px 12px;
  }
  #welcome [data-pane="create"] h3 {
    font-size: 17px;
    margin-bottom: 8px;
  }
  #welcome .welcome-foot .welcome-go,
  #welcome .welcome-foot .welcome-second {
    min-height: 46px;
  }
}
/* A phone on its side with the keyboard up: only the fields and Continue. */
@media (max-height: 300px) {
  #welcome .welcome-brand {
    display: none;
  }
  html body #welcome .welcome-card {
    padding-top: 12px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* Short landscape: below the place block (bottom ~147px). */
  #toasts {
    top: 160px;
  }
  #context {
    max-height: calc(100vh - 190px);
    overflow: auto;
  }
  #context:has(.combat-kit) > p {
    display: none;
  }
  #iface-body {
    max-height: calc(100dvh - 90px);
  }
  body.iface-open #map-cluster {
    visibility: hidden;
  }
  /* A phone on its side: the backpack lies down as 7 x 4; equipment has its own scrolling well. */
  :root {
    --iface-w: 320px;
  }
  #iface-content > .pack-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
}
/* Touch controls use real 44px boxes so adjacent hit areas do not overlap. */
@media (hover: none) and (pointer: coarse) {
  html body #iface-head .close-button {
    width: 44px;
    height: 44px;
    margin: 0;
  }
  html body #quest .quest-exit {
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin-left: 8px;
  }
  html body #quest .quest-go {
    min-height: 44px;
  }
  html body #panel-heading .close-button {
    width: 44px;
    height: 44px;
    top: 4px;
    right: 4px;
  }
  html body #panel-tabs button {
    min-width: 44px;
    min-height: 44px;
  }
  html body #panel[data-kind="settings"] .seg > button,
  html body #panel .setting > button,
  html body #panel .setting select {
    min-height: 44px;
    height: 44px;
  }
  html body #panel .setting input[type="checkbox"] {
    width: 44px;
    height: 26px;
    border-radius: 13px;
    margin: 9px 0;
  }
  html body #panel .setting input[type="checkbox"]::before {
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
  }
  #panel .setting input[type="checkbox"]:checked::before {
    transform: translateX(18px);
  }
  html body #panel .setting input[type="range"] {
    height: 36px;
  }
  html body #chat-log [data-chat-tab] {
    min-height: 44px;
  }
}
/* The Kout table's bar: a slate strip, not cream. */
html body #kout-bar {
  background: var(--ui-win);
  border: 1px solid var(--ui-trim);
  color: var(--ui-text);
}
/* Short landscape: keep equipment targets full-size and scroll the well and details separately. */
@media (max-height: 520px) and (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  #iface-content > .doll-well {
    --doll: 44px;
    flex: 1 1 auto !important;
    min-height: 0;
    overflow-y: auto;
    align-items: safe center;
  }
  #iface-content > .doll-details {
    flex: 0 1 auto;
    min-height: 72px;
    max-height: 40%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .doll-well .doll {
    gap: 5px 14px;
  }
  .doll-well .doll-slot svg {
    width: 20px;
    height: 20px;
  }
  .doll-well .doll-slot .item-thumb {
    width: 28px;
    height: 28px;
  }
  #iface-content .doll-stats > span {
    padding: 3px 6px;
  }
  #panel .prod-detail .qty-preview {
    display: none;
  }
  .prod-head {
    margin-bottom: 6px;
  }
  .prod-head .slot-icon.big {
    width: 40px;
    height: 40px;
  }
  .prod-mats {
    margin-bottom: 6px;
  }
  html body #panel[data-kind="map"] .map-wrap {
    min-height: 150px;
  }
}
/* ==== end UI part 2 ==== */
/* === FEEL lane: world feedback === */
/* The creature you fight: its name and level over its head, and its life as a small RS3 bar (green over red). */
.world-label.monster {
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  will-change: transform;
}
.world-label.monster .plate-name {
  color: #ffff00;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-shadow: 1px 1px 0 #000, 0 0 3px #000;
}
.world-label.monster .plate-name em {
  font-style: normal;
  color: #e8e0a0;
  font-weight: 600;
}
.world-label.monster .plate-hp {
  display: block;
  border: 1px solid #000;
}
.world-label.monster .plate-hp i {
  display: block;
  height: 100%;
  width: 100%;
  transition: width 0.18s linear;
}
.world-label.monster .plate-info {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #f4ecd0;
  text-shadow: 1px 1px 0 #000, 0 0 3px #000;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.world-label.monster .plate-info svg {
  width: 10px;
  height: 10px;
}
/* Action bar in a fight: prayers glow while on, Retreat points back, a dimmed Strike means auto-attack is off. */
.bar-slot.prayer.on {
  background: #e0c25a33;
  border-color: #e8cf74;
  box-shadow: 0 0 8px #e8cf7466 inset;
}
.bar-slot.off > svg {
  opacity: 0.45;
}
.bar-slot.retreat > svg {
  transform: scaleX(-1);
}
/* Phone: Dodge, Eat and Retreat stay reachable over an open interface window while you fight (the bar sits on top of
   the window's foot until the fight ends). */
/* === end FEEL lane === */

/* Item info: the worn-gear comparison (stage 3); the arrow and sign carry the change, colour only repeats it. */
.ii-compare b.up {
  color: #8fd46a;
}
.ii-compare b.down {
  color: #f08a6a;
}
/* Stage 6 · Game messages: refusals and milestones that were toasts stay readable in the history (glyph + colour). */
#chat-lines .chat-line.system.error .chat-text,
#chat-lines .chat-line.system.error .chat-text b,
#game-lines li.error {
  color: #f3c2b6;
}
#chat-lines .chat-line.system.level .chat-text,
#chat-lines .chat-line.system.drop .chat-text,
#game-lines li.level,
#game-lines li.drop {
  color: #f2d48a;
}
/* Item card: a two-handed weapon's note under the comparison (what each number means is in its tile's tip). */
#item-info .ii-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: -4px 0 10px;
  color: var(--ui-dim, #b9ae95);
  font-size: 11px;
  line-height: 1.4;
}
#item-info .ii-note svg {
  width: 12px;
  height: 12px;
  flex: none;
}
/* Stage 6 · a locked lodestone says what to do on two lines instead of clipping it. */
#panel .lode.locked small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}
/* Stage 6 · prayer points beside life on the action bar (text + icon + colour). */
#action-bar .vitals {
  display: flex;
  gap: 4px;
}
#action-bar .vitals .lp {
  flex: 3 1 0;
}
#action-bar .pp {
  position: relative;
  flex: 1 1 0;
  min-width: 84px;
  height: 24px;
  border-radius: 4px;
  background: #1a2a3a;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
#action-bar .pp > i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(#5fa8d8, #2f6f9e);
}
#action-bar .pp span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#action-bar .pp svg {
  width: 10px;
  height: 10px;
}
/* Slayer task in the tracker column (ui/slayer.js): a gold-rimmed medallion (creature, Slayer claw on the rim, one notch
   per kill asked, filled per kill) with a plate tucked behind it: name and kills done / asked. Done: gold plate, seal,
   "See Bryn". A tap opens the Slayer page. */
#trackers > #slayer-tracker {
  --st-orb: 62px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin: 4px 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  color: var(--ui-text);
  font: 600 12px / 1.15 var(--ui-font);
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
html body #trackers > #slayer-tracker[hidden] {
  display: none;
}
#slayer-tracker .st-orb {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--st-orb);
  height: var(--st-orb);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #2c3d33 0%, #18231e 62%, #0e1612 100%);
  box-shadow:
    0 0 0 1.5px var(--ui-trim),
    0 0 0 3px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 230, 180, 0.12),
    0 6px 16px rgba(6, 14, 11, 0.45);
}
#slayer-tracker .st-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
#slayer-tracker .st-ring circle {
  fill: none;
  stroke-width: 5.2;
  stroke-linecap: butt;
}
#slayer-tracker .st-track {
  stroke: rgba(217, 185, 120, 0.2);
}
#slayer-tracker .st-ring .st-rim {
  stroke: var(--ui-trim);
  stroke-width: 1;
  opacity: 0.9;
}
#slayer-tracker .st-fill {
  stroke: url(#st-gold);
  filter: drop-shadow(0 0 1.5px rgba(242, 205, 122, 0.55));
}
#slayer-tracker .st-new {
  stroke: #fff1c4;
  opacity: 0;
}
#slayer-tracker .st-face {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #3c5446, #1d2b24 75%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 2px 6px rgba(0, 0, 0, 0.45);
}
#slayer-tracker .st-face > * {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  background-size: 108% auto;
  background-position: 50% 30%;
  background-repeat: no-repeat;
}
/* The Slayer claw on the rim, so the medallion never reads as a pet or a target. */
#slayer-tracker .st-mark {
  position: absolute;
  z-index: 2;
  left: -7px;
  top: -6px;
  width: 23px;
  height: 23px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.7));
}
#slayer-tracker .st-mark > * {
  width: 100%;
  height: 100%;
}
#slayer-tracker .st-plate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 42px;
  margin-left: -18px;
  padding: 0 14px 0 26px;
  border: 1px solid var(--ui-trim);
  border-left: 0;
  border-radius: 0 20px 20px 0;
  background: linear-gradient(180deg, rgba(255, 236, 190, 0.06), rgba(255, 236, 190, 0) 60%), var(--ui-win);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.08),
    0 4px 12px rgba(6, 14, 11, 0.35);
}
#slayer-tracker .st-name {
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d6cfbb;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#slayer-tracker .st-count {
  color: var(--ui-title);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
#slayer-tracker .st-count small {
  margin-left: 1px;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 700;
}
#slayer-tracker .st-go {
  font-size: 15px;
}
/* The last kill or two: the rim and plate warm up, no motion. */
#slayer-tracker.is-near .st-orb {
  box-shadow:
    0 0 0 1.5px var(--ui-trim-hi),
    0 0 0 3px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(242, 210, 122, 0.45),
    0 6px 16px rgba(6, 14, 11, 0.45);
}
#slayer-tracker.is-near .st-plate {
  border-color: var(--ui-trim-hi);
}
#slayer-tracker.is-near .st-count {
  color: #fff4d6;
}
/* Done: the ring fills, a gold seal sits on the medallion, and the plate turns gold so it never reads as 11/12. */
#slayer-tracker.is-done .st-fill {
  stroke: #f1d27f;
  filter: drop-shadow(0 0 3px rgba(242, 205, 122, 0.85));
}
#slayer-tracker.is-done .st-orb {
  box-shadow:
    0 0 0 1.5px var(--ui-trim-hi),
    0 0 0 3px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(242, 205, 122, 0.5);
  animation: st-glow 2.4s ease-in-out 3;
}
#slayer-tracker.is-done .st-plate {
  border-color: #f2d27a;
  background: linear-gradient(180deg, #5a4120 0%, #33240f 70%, #24190a 100%);
}
#slayer-tracker.is-done .st-name {
  color: #e8d6a8;
}
#slayer-tracker.is-done .st-go {
  color: #fff4d6;
}
#slayer-tracker .st-seal {
  position: absolute;
  z-index: 2;
  right: -4px;
  bottom: -3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f6dc95, #c99b3b 70%, #8a6526);
  box-shadow:
    0 0 0 1.5px #3a2c19,
    0 2px 4px rgba(0, 0, 0, 0.5);
}
#slayer-tracker .st-seal::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 4.5px;
  width: 5px;
  height: 9px;
  border: solid #2b2112;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg);
}
/* A kill on task: the medallion swells once, the new notch flashes, the count bumps. */
#slayer-tracker.st-hit .st-orb {
  animation: st-pulse 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
}
/* The kill that finishes the task: the swell, then the done glow (otherwise the swell would replace it). */
#slayer-tracker.is-done.st-hit .st-orb {
  animation:
    st-pulse 0.6s cubic-bezier(0.3, 1.6, 0.5, 1),
    st-glow 2.4s ease-in-out 0.6s 3;
}
#slayer-tracker.st-hit .st-new {
  animation: st-notch 0.9s ease-out;
}
#slayer-tracker.st-hit .st-count {
  animation: st-bump 0.6s ease-out;
}
@keyframes st-pulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.12);
    box-shadow:
      0 0 0 1.5px var(--ui-trim-hi),
      0 0 0 3px rgba(0, 0, 0, 0.5),
      0 0 18px rgba(242, 205, 122, 0.75);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes st-notch {
  0%,
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes st-bump {
  0% {
    color: #fff4cf;
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes st-glow {
  50% {
    box-shadow:
      0 0 0 1.5px var(--ui-trim-hi),
      0 0 0 3px rgba(0, 0, 0, 0.5),
      0 0 18px rgba(242, 205, 122, 0.75);
  }
}
@media (hover: hover) {
  #slayer-tracker:hover .st-plate {
    border-color: var(--ui-trim-hi);
  }
}
#slayer-tracker:focus-visible {
  outline: 2px solid var(--ui-select);
  outline-offset: 4px;
  border-radius: 32px;
}
@media (max-width: 700px) {
  #trackers > #slayer-tracker {
    --st-orb: 56px;
  }
  #slayer-tracker .st-face {
    inset: 9px;
  }
  #slayer-tracker .st-mark {
    width: 21px;
    height: 21px;
  }
  #slayer-tracker .st-plate {
    height: 36px;
    padding-right: 12px;
  }
  #slayer-tracker .st-count {
    font-size: 16px;
  }
}
#target-box .tb-slayer {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ui-title);
}
#target-box .tb-slayer .ui-art {
  width: 14px;
  height: 14px;
}
/* The prayer bar is a button (opens the prayer tray); it glows and shows each prayer that is on, so a drain is never a mystery. */
html body #action-bar button.pp {
  display: block;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}
#action-bar button.pp:hover {
  filter: brightness(1.2);
}
#action-bar button.pp.praying {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 0 1px #9fd4ff, 0 0 10px #5fa8d8;
  animation: pp-glow 1.6s ease-in-out infinite;
}
@keyframes pp-glow {
  50% {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 0 1px #9fd4ff, 0 0 3px #5fa8d8;
  }
}
#action-bar .pp .pp-on {
  display: inline-flex;
  width: 13px;
  height: 13px;
}
#action-bar .pp .pp-on :is(svg, .ui-art, .item-thumb) {
  width: 13px;
  height: 13px;
}
html body #action-bar .prayer-tray {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: min(340px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid var(--ui-trim-hi, var(--ui-line));
  border-radius: var(--ui-radius-win, 10px);
  background: var(--ui-win);
  box-shadow: var(--ui-frame, 0 8px 24px #0006);
  pointer-events: auto;
}
#action-bar .pray-slot {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 62px;
  padding: 5px 2px 4px;
  border: 1px solid var(--ui-slot-line, var(--ui-line));
  border-radius: var(--ui-radius, 8px);
  background: var(--ui-cell);
  color: var(--ui-muted);
  font: 600 9.5px / 1.15 var(--ui-font);
  cursor: pointer;
}
#action-bar .pray-slot > :first-child {
  width: 30px;
  height: 30px;
  opacity: 0.55;
}
#action-bar .pray-slot.on {
  border-color: #9fd4ff;
  background: #1d3a52;
  color: #e8f5ff;
  box-shadow: 0 0 8px #5fa8d8;
}
#action-bar .pray-slot.on > :first-child {
  opacity: 1;
}
#action-bar .prayer-tray small {
  flex-basis: 100%;
  text-align: center;
  font-size: 10px;
  color: var(--ui-muted);
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #action-bar .pp {
    min-width: 72px;
  }
}
/* Stage 6 · the target box: the creature you fight, with written difficulty, life and weakness, and the first-fight coach. */
#trackers > #target-box {
  padding: 8px 10px;
  pointer-events: none;
  font: 500 12px / 1.35 var(--ui-font);
  color: var(--ui-text);
}
#target-box .tb-name {
  font-weight: 700;
  font-size: 13px;
}
#target-box .tb-name em {
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  opacity: 0.9;
}
#target-box .tb-hp {
  position: relative;
  height: 14px;
  margin: 5px 0 3px;
  border-radius: 4px;
  background: #3a1d1a;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
#target-box .tb-hp i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(#c8463e, #8f2620);
}
#target-box .tb-hp span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  font-variant-numeric: tabular-nums;
}
#target-box .tb-hp svg {
  width: 10px;
  height: 10px;
}
#target-box small {
  color: var(--ui-muted);
}
/* The coming blow (combat.js comingMove): a pip and its name in the move's ring colour (--mv); lit while its warning is up. */
#target-box .tb-move {
  display: block;
  margin: 2px 0 3px;
  padding-left: 14px;
  position: relative;
  font-size: 11px;
  color: var(--ui-muted);
}
#target-box .tb-move::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--mv);
  box-sizing: border-box;
}
#target-box .tb-move b {
  color: var(--mv);
  font-weight: 700;
}
#target-box .tb-move.live {
  color: var(--ui-text);
}
#target-box .tb-move.live::before {
  background: var(--mv);
  box-shadow: 0 0 6px var(--mv);
}
#target-box .tb-coach {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--ui-line);
}
#target-box .tb-coach > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}
#target-box .tb-coach > div > svg,
#target-box .tb-ring {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ui-accent);
}
#target-box .tb-coach > div > span {
  flex: 1;
  white-space: nowrap;
}
/* The warning ring as the fight draws it: red, or yellow with a white edge for colour-blind warnings. */
#target-box .tb-ring {
  border-radius: 50%;
  border: 3px solid #e0483a;
  box-shadow: 0 0 6px #e0483a;
}
#target-box .tb-ring.cb {
  border-color: #ffd23a;
  box-shadow: 0 0 0 1px #fff;
}
#target-box .tb-coach button {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: var(--ui-radius, 6px);
  border: 1px solid var(--ui-trim-hi, var(--ui-trim));
  background: var(--ui-cell);
  color: var(--ui-accent);
  font: 700 12px / 1 var(--ui-font);
  cursor: pointer;
}
#target-box .tb-coach button svg {
  width: 13px;
  height: 13px;
}
#target-box kbd {
  padding: 0 4px;
  border: 1px solid var(--ui-line);
  border-radius: 3px;
  color: var(--ui-muted);
  font: 700 10px var(--ui-font);
}
/* The narrow tracker column has no room for key chips beside the coach's buttons. */
@media (max-width: 700px) {
  #target-box kbd {
    display: none;
  }
}
/* Stage 6 · Settings › Interface size and Text size (clamped in settings.js): HUD chrome and reading surfaces scale
   separately; window contents grow inside their frame and scroll, so no window outgrows the screen. */
html body :is(#action-bar, #map-cluster, #iface-tabs, #context, #xp-tracker, #target-box) {
  zoom: var(--ui-scale, 1);
}
html body :is(#chat, #game-log, #quest, #item-info, #toasts, #panel-content, #iface-content) {
  zoom: var(--text-scale, 1);
}

/* Stage 5 quests (content-goals): the completion/start card, the journal's step list, the person's line and actions. */
.quest-moment {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: min(420px, 90vw);
  min-height: 52px;
  padding: 0 4px;
  /* The painted scroll (art/quests/complete-scroll.png, 600×200 at 2×): rollers and torn edges as a 9-slice frame. */
  border: solid transparent;
  border-width: 30px 40px;
  border-image: url(art/quests/complete-scroll.png) 60 80 fill / 30px 40px stretch;
  background: none;
  filter: drop-shadow(0 8px 14px rgba(40, 30, 10, 0.35));
  color: #3b2f1c;
  animation: quest-moment-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  pointer-events: none;
}
.quest-moment.out {
  opacity: 0;
  transition: opacity 0.6s;
}
.quest-moment-icon svg {
  width: 34px;
  height: 34px;
  color: #b8860b;
}
/* The painted quest-started or quest-complete seal (art/ui/toasts, 192px art). */
.quest-moment-icon .item-thumb {
  width: 72px;
  height: 72px;
}
.quest-moment small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6a1c;
}
.quest-moment strong {
  display: block;
  font-size: 17px;
}
.quest-moment span:not(.quest-moment-icon) {
  display: block;
  font-size: 13px;
  margin-top: 2px;
}
@keyframes quest-moment-in {
  from {
    opacity: 0;
    transform: translate(-50%, -12px) scale(0.92);
  }
}
.qj-steps {
  margin: 6px 0 6px 18px;
  padding: 0;
  font-size: 12.5px;
}
.qj-steps li.done {
  color: #7d8a74;
  text-decoration: line-through;
}
.qj-steps li.now {
  font-weight: 700;
}
.qj-steps li.later {
  color: #9aa392;
}
.qj-say {
  font-style: italic;
  margin: 4px 0;
}
.qj-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.qj-tracked {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  color: #b8860b;
}
.qj-tracked svg {
  width: 14px;
  height: 14px;
}
/* Stage 6 · the glossary under the controls list. */
.glossary {
  margin: 4px 0 8px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: 12px;
}
.glossary dt {
  font-weight: 700;
  color: var(--ui-text);
}
.glossary dd {
  margin: 0;
  color: var(--ui-muted);
}
/* Stage 6 · short landscape in a fight: fading Game lines would sit on the life/prayer row, so they stay in the history
   (chat › Game) until the fight ends; an opened messages list still shows. */
/* Stage 5: the Achievements window has seven tabs (Diaries, Music added); inactive ones show their icon only (the title
   attribute still names them) so the strip never overlaps on desktop or phone. */
#panel .seg-tabs:has(> button[data-log-tab]:nth-child(7)) > button:not(.on) > span {
  display: none;
}

/* ---- The Players button under the minimap and the refusal notice (reach lane, 2026-10-08). ---- */
html body #players {
  position: static;
  flex: none;
  width: auto;
  height: 36px;
  min-height: 36px;
  white-space: nowrap;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 18px;
  background: var(--ui-win);
  border: 1px solid var(--ui-trim-hi, var(--ui-trim));
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.1), 0 4px 12px rgba(6, 14, 11, 0.35);
  color: var(--ui-title, var(--ui-text));
  font: 700 12px / 1 var(--ui-font);
  letter-spacing: 0.3px;
  cursor: pointer;
}
/* A refusal ("why didn't my click do anything"): one amber-on-dark box near the top centre, above windows, never
   catching the pointer. A repeat of the same line counts up and pops again instead of stacking. */
html body #notice {
  position: fixed;
  top: max(calc(14vh + 20px), calc(env(safe-area-inset-top) + 170px));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast, 22);
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 16px 10px 10px;
  background: rgba(30, 14, 12, 0.92);
  border: 1px solid rgba(214, 92, 64, 0.85);
  border-radius: var(--ui-radius, 6px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 200, 120, 0.08);
  color: #ffd9a0;
  font: 600 14px / 1.35 var(--ui-font);
  text-shadow: 0 1px 1px #000;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
html body :is(#notice, #map-notice).requirement {
  background: var(--ui-win);
  border: 1px solid var(--ui-line);
  border-left: 2px solid var(--ui-warn);
  color: var(--ui-text);
  text-shadow: none;
}
html body :is(#notice, #map-notice).requirement .notice-mark {
  color: var(--ui-warn);
  background: var(--ui-cell);
}
html body :is(#notice, #map-notice).requirement .notice-count {
  color: var(--ui-muted);
}
html body #map-notice {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
  padding: 10px;
  border-radius: var(--ui-radius);
  background: var(--ui-win);
  color: var(--ui-text);
  font: 600 14px / 1.4 var(--ui-font);
}
html body #map-notice .notice-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
html body #map-notice .notice-mark {
  flex: none;
}
html body #map-notice .notice-mark .ui-art {
  width: 22px;
  height: 22px;
}
html body :is(#notice, #map-notice)[hidden] {
  display: none;
}
html body #notice.out {
  opacity: 0;
}
#notice.bump {
  animation: notice-pop 0.22s ease-out;
}
@keyframes notice-pop {
  from {
    transform: translateX(-50%) scale(0.94);
  }
  to {
    transform: translateX(-50%) scale(1);
  }
}
html body #notice .notice-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c8463e;
  color: #fff;
  font: 800 14px / 1 var(--ui-font);
  text-shadow: none;
}
html body #notice .notice-count {
  flex: none;
  color: #f3c2b6;
  font-size: 12px;
}
body.reduced #notice.bump {
  animation: none;
}
/* A level-up card lets taps through to the world; only its small Guide button opens that skill's guide. */
html body #toasts .toast .toast-go {
  pointer-events: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: center;
  margin-left: 4px;
  border: 1px solid var(--ui-trim-hi, var(--ui-trim));
  background: var(--ui-cell);
  color: var(--ui-accent);
  font: 700 12px / 1 var(--ui-font);
  cursor: pointer;
}
html body #toasts .toast .toast-go svg {
  width: 14px;
  height: 14px;
}
@media (hover: none) and (pointer: coarse) {
  #target-box .tb-coach button {
    min-height: 40px;
    padding: 0 12px;
  }
  /* The phone's narrow tracker column cannot hold a cue and its button on one line: the fight bar just below already
     carries Block and Eat, so the coach keeps only its words, and they wrap. */
  #target-box .tb-coach button {
    display: none;
  }
  #target-box .tb-coach > div > span {
    white-space: normal;
  }
  html body #players {
    height: 44px;
    min-height: 44px;
  }
  html body #toasts .toast .toast-go {
    min-height: 44px;
    min-width: 64px;
  }
}

/* ---- The Guide (the wiki), rebuilt: crumbs, a title with a one-line summary, number tiles, then folding sections.
   Links inside prose stay inline; every other control is a 40px+ target. Colours come from the window tokens. ---- */
@media (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  #trade-sheet {
    height: auto;
    min-height: 0;
  }
  #trade-banner {
    bottom: 118px;
  }
  html body #panel[data-kind="wiki"] {
    width: min(580px, calc(100vw - 32px));
  }
}
#panel .wiki-page {
  font: 400 13px / 1.5 var(--ui-font);
  color: var(--ui-text);
  padding-bottom: 12px;
}
#panel .wiki-page svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
#panel .wiki-link {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  min-height: 0;
  min-width: 0;
  color: var(--ui-select);
  text-decoration: underline;
  text-decoration-color: rgba(241, 217, 155, 0.4);
  text-underline-offset: 2px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}
#panel .wiki-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 0 0 10px;
  font: 500 11.5px / 1.4 var(--ui-font);
  color: var(--ui-muted);
}
#panel .wiki-crumbs .wiki-link {
  font-weight: 500;
  padding: 6px 0;
}
#panel .wiki-crumbs i {
  font-style: normal;
  opacity: 0.6;
}
#panel .wiki-crumbs span {
  color: var(--ui-text);
}
#panel .wiki-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
}
#panel .wiki-head > div {
  flex: 1;
  min-width: 0;
}
/* A place's or quest's painted banner (960×360 at 2×) above its title. */
#panel .wiki-banner {
  width: 100%;
  aspect-ratio: 8 / 3;
  margin: 0 0 12px;
  border-radius: 10px;
  border: 1px solid var(--ui-slot-line);
  background: var(--ui-cell) center / cover no-repeat;
}
/* A place tile's crop of its banner, wider than the square icons. */
#panel .wiki-tile .wiki-ic:has(> .wiki-crop) {
  width: 52px;
}
#panel .wiki-tile .wiki-ic .item-thumb.wiki-crop {
  width: 52px;
  height: 32px;
  border-radius: 6px;
  background-size: cover;
}
/* Painted how-to pictures (480×320 at 2×) beside the step they show; two side by side wrap on a phone. */
#panel .wiki-howto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
#panel .wiki-howto img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--ui-slot-line);
  background: var(--ui-cell);
}
#panel .win-empty .wiki-empty-art {
  width: 72px;
  height: 72px;
  margin: 0 0 4px;
}
/* A recipe's station picture beside its name ("Where" on an item's Make). */
#panel .wiki-where {
  display: flex;
  align-items: center;
  gap: 8px;
}
#panel .wiki-where > .item-thumb {
  width: 30px;
  height: 30px;
}
#panel .wiki-pic {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--ui-cell);
  border: 1px solid var(--ui-slot-line);
  color: var(--ui-accent);
}
#panel .wiki-pic .item-thumb,
#panel .wiki-pic .wiki-art,
#panel .wiki-pic .wiki-portrait {
  width: 48px;
  height: 48px;
}
#panel .wiki-pic svg {
  width: 28px;
  height: 28px;
}
#panel .wiki-head h3,
#panel .wiki-list-title {
  margin: 0;
  font: 700 20px / 1.2 Georgia, serif;
  color: var(--ui-title);
}
#panel .wiki-list-title {
  margin-bottom: 10px;
}
#panel .wiki-kind {
  display: inline-block;
  margin: 4px 0 0;
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px solid var(--ui-slot-line);
  font: 700 9.5px / 1.5 var(--ui-font);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-accent);
}
#panel .wiki-sum {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ui-muted);
}
#panel .wiki-sec {
  margin: 16px 0 0;
}
#panel .wiki-sec h4 {
  margin: 0 0 6px;
  padding: 0 0 5px;
  border-bottom: 1px solid var(--ui-line);
  font: 700 11px / 1.3 var(--ui-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ui-accent);
}
#panel .wiki-start {
  padding: 10px 12px 12px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell-on);
  border: 1px solid var(--ui-trim);
}
#panel .wiki-start h4 {
  border-bottom-color: var(--ui-slot-line);
}
#panel .wiki-first {
  margin-top: 8px;
}
#panel .wiki-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--ui-line);
}
#panel .wiki-line:last-child {
  border-bottom: 0;
}
#panel .wiki-line.locked {
  opacity: 0.55;
}
#panel .wiki-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--ui-accent);
}
#panel .wiki-ic .item-thumb {
  width: 30px;
  height: 30px;
}
#panel .wiki-main {
  flex: 1;
  min-width: 0;
}
#panel .wiki-main em,
#panel .wiki-block-head em,
#panel .wiki-chip em,
#panel .wiki-group em {
  font-style: normal;
  color: var(--ui-muted);
  font-weight: 500;
}
#panel .wiki-main small {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ui-muted);
}
#panel .wiki-lv {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border-radius: 5px;
  background: var(--ui-cell-on);
  color: var(--ui-select);
  font: 700 12px / 1 var(--ui-font);
  font-variant-numeric: tabular-nums;
}
#panel .wiki-lv.locked {
  background: var(--ui-cell);
  color: var(--ui-muted);
}
#panel .wiki-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ui-trim);
  background: var(--ui-cell);
  color: var(--ui-accent);
  cursor: pointer;
}
#panel .wiki-acts,
#panel .wiki-actrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#panel .wiki-actrow {
  margin: 0 0 4px;
}
#panel .wiki-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid var(--ui-trim-hi);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
  font: 700 12.5px / 1 var(--ui-font);
  cursor: pointer;
}
#panel .wiki-act.ghost {
  background: transparent;
  color: var(--ui-select);
  border-color: var(--ui-trim);
}
#panel .wiki-block {
  margin: 8px 0;
  padding: 10px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: var(--ui-cell-raised);
}
#panel .wiki-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font: 700 13px / 1.4 var(--ui-font);
}
#panel .wiki-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--ui-cell);
  font: 600 11.5px / 1.6 var(--ui-font);
  color: var(--ui-text);
}
#panel .wiki-kv {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
#panel .wiki-kv > span:first-child {
  flex: none;
  width: 70px;
  font: 700 10px / 1.4 var(--ui-font);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-muted);
}
#panel .wiki-kv > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
#panel .wiki-kv small {
  display: block;
  color: var(--ui-muted);
  font-size: 12px;
}
#panel .wiki-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#panel .wiki-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 3px 10px 3px 4px;
  border-radius: 18px;
  border: 1px solid var(--ui-line);
  background: var(--ui-cell);
  color: var(--ui-text);
  font: 600 12.5px / 1.2 var(--ui-font);
  text-align: left;
  cursor: pointer;
}
#panel .wiki-chip .wiki-ic,
#panel .wiki-chip .wiki-ic .item-thumb {
  width: 26px;
  height: 26px;
}
#panel .wiki-chip b {
  color: var(--ui-select);
  font-variant-numeric: tabular-nums;
}
#panel .wiki-chip.more {
  padding-left: 10px;
  color: var(--ui-select);
}
#panel .wiki-spots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
#panel .wiki-spot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 0 10px;
  border-radius: 20px;
  border: 1px solid var(--ui-line);
  background: var(--ui-cell);
}
#panel .wiki-spot .wiki-go {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 0;
}
#panel .wiki-note {
  margin: 6px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ui-muted);
}
#panel .wiki-note.good {
  color: var(--ui-good);
}
#panel .wiki-note.warn {
  color: var(--ui-warn);
}
#panel .wiki-note.bad {
  color: var(--ui-bad);
}
/* An area's gate beside its crossing walk, and a gate line under a stall: red while it would turn you away. */
#panel .wiki-need {
  align-self: center;
  font-size: 12px;
  color: var(--ui-muted);
}
#panel :is(.wiki-need, .wiki-main small span).bad {
  color: var(--ui-bad);
}
#panel .wiki-steps {
  margin: 4px 0;
  padding-left: 22px;
}
#panel .wiki-steps li {
  padding: 4px 0;
}
#panel :is(.wiki-band, .wiki-more) > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 4px;
  list-style: none;
  cursor: pointer;
  font: 700 13px / 1.2 var(--ui-font);
  color: var(--ui-text);
}
#panel :is(.wiki-band, .wiki-more) > summary::-webkit-details-marker {
  display: none;
}
#panel :is(.wiki-band, .wiki-more) > summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ui-accent);
  border-bottom: 2px solid var(--ui-accent);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
#panel :is(.wiki-band, .wiki-more)[open] > summary::before {
  transform: rotate(45deg);
}
#panel .wiki-band {
  border-bottom: 1px solid var(--ui-line);
}
#panel .wiki-band > summary em {
  margin-left: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  color: var(--ui-muted);
}
#panel .wiki-band > summary em.good {
  color: var(--ui-good);
}
#panel .wiki-band[open] {
  padding-bottom: 6px;
}
#panel .wiki-more > summary {
  font-weight: 600;
  color: var(--ui-select);
}
#panel .wiki-more.inline {
  display: contents;
}
#panel .wiki-group {
  margin: 16px 0 6px;
  font: 700 11px / 1.3 var(--ui-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ui-accent);
}
#panel .wiki-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
#panel .wiki-tile,
#panel .wiki-row {
  min-height: 48px;
  font-size: 13px;
}
#panel .wiki-tile small,
#panel .wiki-row small {
  font-size: 11.5px;
}
#panel .wiki-tiles.big .wiki-tile {
  min-height: 60px;
}
#panel .wiki-tile .wiki-ic,
#panel .wiki-tile .wiki-ic .item-thumb {
  width: 32px;
  height: 32px;
}
/* The front page's painted browse tiles show larger. */
#panel .wiki-tiles.big .wiki-tile .wiki-ic,
#panel .wiki-tiles.big .wiki-tile .wiki-ic .item-thumb {
  width: 44px;
  height: 44px;
}
/* Sections fold: the heading is the toggle, with a chevron at its end. */
#panel details.wiki-sec > summary {
  list-style: none;
  cursor: pointer;
}
#panel details.wiki-sec > summary::-webkit-details-marker {
  display: none;
}
#panel details.wiki-sec > summary h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
}
#panel details.wiki-sec > summary h4 em {
  font-style: normal;
  color: var(--ui-muted);
  letter-spacing: 0;
}
#panel details.wiki-sec > summary h4::after {
  content: '';
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--ui-accent);
  border-bottom: 2px solid var(--ui-accent);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
#panel details.wiki-sec:not([open]) > summary h4::after {
  transform: rotate(-45deg);
}
#panel details.wiki-sec:not([open]) > summary h4 {
  margin-bottom: 0;
}
/* Number tiles: a page's lead facts. */
#panel .wiki-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px;
  margin: 0 0 10px;
}
#panel .wiki-stat {
  min-width: 0;
  padding: 6px 9px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-line);
  background: var(--ui-cell);
}
#panel .wiki-stat small {
  display: block;
  font: 700 9.5px / 1.5 var(--ui-font);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ui-muted);
}
#panel .wiki-stat b {
  display: block;
  font: 700 14px / 1.3 var(--ui-font);
  font-variant-numeric: tabular-nums;
  color: var(--ui-select);
  overflow-wrap: anywhere;
}
#panel .wiki-stat.good b {
  color: var(--ui-good);
}
#panel .wiki-stat.bad b {
  color: var(--ui-bad);
}
/* Progress: a thin bar and its count. */
#panel .wiki-prog {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 8px;
}
#panel .wiki-prog small {
  flex: none;
  max-width: 60%;
  font-size: 12px;
  color: var(--ui-muted);
}
#panel .wiki-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  overflow: hidden;
}
#panel .wiki-bar > i {
  display: block;
  height: 100%;
  background: var(--ui-accent);
}
#panel .wiki-sum .wiki-prog {
  margin: 2px 0 0;
}
/* A long list scrolls inside its section. */
#panel .wiki-scroll {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
/* Jump buttons to a page's sections. */
#panel .wiki-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}
#panel .wiki-chip.plain {
  padding-left: 10px;
  cursor: default;
}
#panel button.wiki-chip.plain {
  cursor: pointer;
}
#panel .wiki-chip.plain .wiki-ic {
  margin-left: -6px;
}
#panel .wiki-chip.bad b,
#panel .wiki-chip.bad em {
  color: var(--ui-bad);
}
#panel .wiki-to {
  align-self: center;
  color: var(--ui-muted);
}
#panel .wiki-kv + .wiki-actrow {
  margin-top: 10px;
}
#panel .wiki-chips + .wiki-actrow,
#panel .wiki-chips + .wiki-stats,
#panel .wiki-stats + .wiki-chips {
  margin-top: 8px;
}
/* Checklists: done, not yet; quest steps done and the current one. */
#panel .wiki-odds {
  flex: none;
  min-width: 44px;
  text-align: right;
  font: 600 12px / 1 var(--ui-font);
  font-variant-numeric: tabular-nums;
  color: var(--ui-muted);
}
#panel .wiki-lv.done {
  background: var(--ui-cell-on);
  color: var(--ui-good);
}
#panel .wiki-lv svg {
  width: 14px;
  height: 14px;
}
#panel .wiki-steps li.done {
  opacity: 0.55;
  text-decoration: line-through;
}
#panel .wiki-steps li.now {
  color: var(--ui-title);
  font-weight: 600;
}
#panel .wiki-tile.done,
#panel .wiki-tile.unknown {
  opacity: 0.55;
}
#panel .wiki-band > .wiki-tiles,
#panel .wiki-band > .wiki-actrow {
  margin-bottom: 6px;
}
#panel .wiki-band > summary .wiki-ic,
#panel .wiki-band > summary svg,
#panel .wiki-band > summary .item-thumb {
  width: 22px;
  height: 22px;
}
@media (hover: hover) {
  .seg > button:hover:not(.on):not(:disabled),
  :is(#panel, #make-x) .bank-qty > button:hover:not(.on),
  #panel .qty > .qty-chip:hover:not(.on):not(:disabled) {
    background: var(--ui-cell-hover);
    color: var(--ui-text);
  }
  :is(#panel, #iface-content, #trade-sheet, #make-x) button.pack-cell:hover {
    background: var(--ui-cell-hover);
    border-color: rgba(217, 185, 120, 0.55);
  }
  html body #dialogue-box .dialogue-choices > button:hover {
    background: var(--ui-cell-hover);
    border-color: var(--ui-line);
  }
  #target-box .tb-coach button:hover {
    background: var(--ui-cell-hover);
    color: var(--ui-select);
  }
  html body #toasts .toast .toast-go:hover {
    background: var(--ui-cell-hover);
    color: var(--ui-select);
  }
  #panel :is(.wiki-chip, .wiki-go, .wiki-act.ghost):hover {
    background: var(--ui-cell-hover);
    border-color: var(--ui-trim-hi);
  }
  #panel .wiki-act:not(.ghost):hover {
    background: var(--ui-select);
  }
  #panel .wiki-link:hover {
    text-decoration-color: currentColor;
  }
}
/* Phones: bigger targets, links in prose get room to tap, one column for the start cards. */
@media (max-width: 700px), (pointer: coarse) {
  #panel .wiki-page {
    font-size: 14px;
  }
  #panel .wiki-chip {
    min-height: 40px;
  }
  #panel .wiki-go,
  #panel .wiki-spot .wiki-go {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
  #panel .wiki-act {
    min-height: 44px;
  }
  #panel .wiki-main,
  #panel .wiki-note {
    line-height: 1.9;
  }
  #panel .wiki-crumbs .wiki-link {
    padding: 10px 0;
  }
}
/* Narrow phones: a fact's label sits above its chips, so the chips keep the full width. */
@media (max-width: 480px) {
  #panel .wiki-kv:has(> .wiki-chips) {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  #panel .wiki-kv:has(> .wiki-chips) > span:first-child {
    width: 100%;
  }
  #panel .wiki-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* A row's Walk there and Map keep only their icons, so the name beside them keeps its width. */
  #panel .wiki-line .wiki-act {
    padding: 0 12px;
  }
  #panel .wiki-line .wiki-act > span {
    display: none;
  }
  #panel .wiki-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #panel .wiki-scroll {
    max-height: 260px;
  }
}
#panel .wiki-first p {
  margin: 2px 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ui-text);
}
/* Phone landscape: little height, so the title and facts take less of it. */
@media (max-height: 500px) {
  body.fighting #game-log {
    display: none;
  }
  #panel .wiki-pic {
    width: 44px;
    height: 44px;
  }
  #panel .wiki-pic :is(.item-thumb, .wiki-art, .wiki-portrait) {
    width: 38px;
    height: 38px;
  }
  #panel .wiki-head h3 {
    font-size: 18px;
  }
}

/* A Guide link inside a list row's name reads as part of the line, left-aligned. */
.list-main .text-button.inline {
  display: inline;
  padding: 0;
  text-align: left;
  font: inherit;
}

/* ---- Painted HUD pictures (art/ui, drawn at twice the size shown): tabs, orbs, vitals, combat styles, coins, the
   refusal seal. Each sits where its line icon sat. ---- */
html body #iface-tabs .ui-art {
  width: 30px;
  height: 30px;
}
html body .orb .ui-art {
  width: 72%;
  height: 72%;
}
#action-bar :is(.lp, .pp) .ui-art {
  width: 15px;
  height: 15px;
}
#action-bar .adr .ui-art {
  width: 13px;
  height: 13px;
}
/* The bars' fill is their bare <i>; the picture is an <i> too, so it takes back its own place and fit. */
#action-bar :is(.lp, .pp, .adr) .ui-art,
#target-box .tb-hp .ui-art {
  position: relative;
  inset: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: none;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #action-bar :is(.lp, .pp) .ui-art {
    width: 12px;
    height: 12px;
  }
}
.hitsplat .ui-art.hitsplat-icon {
  width: 22px;
  height: 22px;
}
/* ---- Painted HUD, part 2 (art/ui at twice the size shown). ---- */
/* Hitsplat plates (192×96): your hit, damage taken, an ally's hit and a heal stretch across the middle like a 9-slice;
   a critical is the starburst drawn whole behind the number. Block, miss and dodge keep their badge with a painted mark. */
.hitsplat:is(.hit, .heal) {
  border: 1px solid transparent;
  background: none;
  box-shadow: none;
  border-image: url(art/ui/hitsplats/hit.png) 40 56 fill / 13px 19px / 3px 5px stretch;
}
.hitsplat.hit.taken {
  border-image-source: url(art/ui/hitsplats/taken.png);
}
.hitsplat.hit.ally {
  border-image-source: url(art/ui/hitsplats/ally.png);
}
.hitsplat.heal {
  padding-left: 20px;
  border-image-source: url(art/ui/hitsplats/heal.png);
}
.hitsplat.heal .hitsplat-icon {
  display: none;
}
.tb-boss-tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff6d0; box-shadow: 0 0 2px #000; text-decoration: none; pointer-events: auto; }
.foe-bar { position: absolute; left: 0; top: 0; width: 56px; height: 7px; background: #b3261e; border: 1px solid #1a0d0b; box-shadow: 0 1px 2px #0009; pointer-events: none; will-change: transform; }
.foe-bar[hidden] { display: none; }
.foe-bar > div { position: absolute; left: 0; top: 0; bottom: 0; }
.foe-bar-trail { background: #f1d0b0; transition: width .5s ease-in .35s; }
.foe-bar-fill { background: #3fbf3a; transition: width .12s ease-out; }
.hitsplat.hit.mine.s-ranged:not(.critical) { filter: hue-rotate(95deg) saturate(1.15); }
.hitsplat.hit.mine.s-magic:not(.critical) { filter: hue-rotate(195deg) saturate(1.2); }
.hitsplat.hit.taken.dot { filter: hue-rotate(-50deg) saturate(0.8) brightness(0.9); }
.hitsplat.miss { min-width: 46px; font-size: 20px; letter-spacing: 0; }
.hitsplat.miss .hitsplat-icon { display: none; }
.hitsplat.hit.critical {
  color: #fff8e4;
  text-shadow: 0 1px 2px #5a2400, 0 0 4px #7a3200;
  border-image: url(art/ui/hitsplats/crit.png) 0 fill / 0 / 9px 14px stretch;
}
/* Level up: the skill's picture over painted rays, or inside the laurel at level 99; the key tag beside "Unlocks". */
.toast .toast-burst {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
}
.toast .toast-burst::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: url(art/ui/toasts/levelup-rays.png) center / contain no-repeat;
}
.toast.level.max .toast-burst::before {
  inset: -9px -9px -11px;
  background-image: url(art/ui/toasts/levelup-99.png);
}
.toast .toast-burst .toast-art {
  position: relative;
}
.toast.level.max .toast-burst .toast-art {
  transform: translateY(-2px) scale(0.8);
}
.toast.level .toast-unlock {
  display: inline-block;
  vertical-align: -3px;
  width: 15px;
  height: 15px;
  margin-right: 4px;
}
/* One left edge rail for every unsolicited message. toast.js reserves the free height around the HUD;
   trackers and messages scroll independently so neither can push the other into chat or the play view. */
html body #message-rail {
  --message-width: min(280px, calc(40vw - max(var(--hud-m), env(safe-area-inset-left))));
  position: fixed;
  left: max(var(--hud-m), env(safe-area-inset-left));
  top: var(--message-top, max(var(--hud-m), env(safe-area-inset-top)));
  width: var(--message-width);
  height: var(--message-height, calc(100dvh - 140px));
  scroll-padding-top: max(var(--hud-m), env(safe-area-inset-top));
  scroll-padding-bottom: max(var(--hud-m), var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  z-index: var(--z-toast, 22);
  pointer-events: none;
}
#message-rail #trackers {
  position: static;
  width: auto;
  min-height: 0;
  max-height: 100%;
  flex: 0 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  pointer-events: auto;
}
#message-rail:not(.has-trackers) #trackers {
  display: none;
}
#message-rail.has-messages #trackers {
  max-height: 55%;
  flex-shrink: 0;
}
html body #message-rail #trackers > * {
  flex-shrink: 0;
  max-width: 100%;
}
@media (max-width: 700px) and (orientation: portrait) {
  /* Reserve the task's real width in the placement solver; notices keep their narrow column. */
  #message-rail:has(#quest.compact:not([hidden])) {
    width: min(240px, calc(100vw - 176px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }
  #message-rail #trackers:has(#quest.compact:not([hidden])) {
    max-height: none;
    flex: none;
  }
}
#message-rail #messages {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, var(--message-width));
  gap: 6px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  zoom: var(--text-scale, 1);
  pointer-events: auto;
}
#message-rail:not(.has-messages) #messages {
  display: none;
}
html body #message-rail #messages > * {
  position: relative;
  inset: auto !important; /* Projected hint coordinates cannot override the rail. */
  transform: none;
  translate: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex-shrink: 0;
  margin: 0;
  zoom: 1;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: auto;
}
html body #message-rail #messages > :is([hidden], :empty) {
  display: none;
}
#message-rail #messages :is(#toasts, #message-floats, #bubbles) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  overflow: visible;
}
#message-rail #messages :is(#toasts, #message-floats, #bubbles):empty {
  display: none;
}
#message-rail #messages :is(.toast, .floating, .hitsplat, .chat-bubble) {
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
  transform: none;
  translate: none;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: auto;
}
#message-rail #messages :is(.toast > div, .notice-text, .quest-moment > div, .tb-text) {
  min-width: 0;
}
#message-rail #messages .toast strong {
  white-space: normal;
}
#message-rail #messages .toast {
  animation-name: notice-pop-left;
}
#message-rail #messages .toast:is(.achievement, .clue-read) {
  padding: 8px;
  gap: 6px;
}
#message-rail #messages .toast.achievement span {
  white-space: normal;
}
#message-rail #notice {
  font-size: 13px;
}
#message-rail #notice.bump {
  animation-name: notice-pop-left;
}
@keyframes notice-pop-left {
  from { opacity: 0; }
  to { opacity: 1; }
}
html body #message-rail :is(#rest-banner, #trade-banner, #duel-challenge-banner) {
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
}
#message-rail :is(#rest-banner, #trade-banner, #duel-challenge-banner) button {
  max-width: 100%;
  white-space: normal;
}
@media (max-width: 700px) {
  /* Keep the batch count readable in the narrow message rail; Stop gets its own touch row. */
  html body #message-rail #rest-banner:has([data-batch-stop]) {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    overflow-wrap: normal;
  }
  html body #message-rail #rest-banner:has([data-batch-stop]) .rest-art {
    width: 24px;
    height: 24px;
  }
  #message-rail #rest-banner [data-batch-stop] {
    grid-column: 1 / -1;
    min-height: 44px;
  }
}
#message-rail #duel-hud {
  padding: 8px;
}
html body #message-rail #duel-hud .score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  margin: 6px 0 0;
}
html body #message-rail #duel-hud .score > b { display: none; }
#message-rail #duel-hud .score > :nth-child(4) { grid-area: 2 / 2; }
#message-rail #duel-hud .score > :last-child { grid-area: 2 / 1; }
#message-rail #duel-hud .duel-end-art {
  max-width: 100%;
}
html body #message-rail .quest-moment {
  min-height: 0;
  gap: 6px;
  padding: 4px;
  border-width: 12px;
  border-image-width: 12px;
  animation-name: notice-pop-left;
}
html body #message-rail .quest-moment-icon,
html body #message-rail .quest-moment-icon :is(.quest-moment-art, .item-thumb) {
  width: 30px;
  height: 30px;
  flex: none;
}
html body #message-rail .quest-moment-icon:has(.quest-moment-art) .item-thumb {
  width: 16px;
  height: 16px;
}
html body #message-rail .quest-moment strong { font-size: 13px; }
html body #message-rail .quest-moment span:not(.quest-moment-icon) { font-size: 11px; }
#message-rail #region-card {
  min-height: 48px;
  animation-name: notice-pop-left;
}
html body #message-rail #region-card h2 {
  margin: 0;
  font-size: 16px;
  text-align: left;
}
html body #message-rail #migrate-card {
  padding: 0;
  background: none;
}
html body #message-rail #migrate-card .mirror-card {
  width: 100%;
  max-height: none;
  padding: 10px;
}
#message-rail #migrate-card .mirror-actions {
  flex-wrap: wrap;
}
#message-rail #migrate-card h2 { font-size: 16px; }
html body #message-rail .floating {
  padding: 6px 8px;
  background: var(--ui-win);
  border-radius: var(--ui-radius);
  animation-name: message-fade;
}
@keyframes message-fade {
  0%, 100% { opacity: 0; }
  15%, 70% { opacity: 1; }
}
html body #message-rail .hitsplat {
  flex-wrap: wrap;
  justify-content: flex-start;
  height: auto;
  min-height: 32px;
  padding: 4px 8px;
  gap: 4px;
  will-change: opacity;
}
html body #message-rail .hitsplat .hitsplat-target {
  flex-basis: 100%;
  font: 600 11px / 1.3 var(--ui-font);
  letter-spacing: 0;
  margin: 0;
}
#message-rail .chat-bubble::after { display: none; }
html body.kout-open #message-rail { z-index: 28; }
html body.protocol-open #message-rail { z-index: 31; }
html body:is(.kout-open, .protocol-open) #message-rail #trackers,
html body:is(.kout-open, .protocol-open) #message-rail #messages > :not(#toasts, #notice) {
  display: none !important;
}
html body #toasts .toast {
  padding: 6px 12px;
  font-size: 12px;
}
html body #toasts .toast:is(.level, .drop) {
  gap: 8px;
  padding: 5px 6px 5px 8px;
  box-shadow: var(--ui-frame), 0 0 14px rgba(232, 199, 125, 0.2);
}
html body #toasts .toast:is(.level, .drop) strong {
  font-size: 13px;
  white-space: nowrap;
}
html body #toasts .toast.level span {
  font-size: 10.5px;
}
html body #toasts .toast :is(.toast-burst, .toast-icon) {
  width: 30px;
  height: 30px;
}
#toasts .toast .toast-burst::before {
  inset: -6px;
}
html body #toasts .toast .toast-art {
  width: 30px;
  height: 30px;
}
html body #toasts .toast .toast-go {
  min-height: 28px;
  min-width: 28px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
@media (pointer: coarse) {
  html body #toasts .toast .toast-go {
    min-height: 36px;
    min-width: 36px;
  }
}
/* The death card: the painted fall above the line on what happens next. */
html body #toasts .toast.death {
  display: flex;
  flex-direction: column;
  width: min(300px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
  border-color: var(--ui-trim-hi);
}
.toast.death .toast-illus {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: url(art/ui/illus/death.webp) center / cover no-repeat;
}
.toast.death > div {
  padding: 8px 12px 10px;
}
.toast.death span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ui-muted);
}
/* The rest banner's echo: working while it gathers, resting once done. */
html body #rest-banner .ui-art.rest-art {
  width: 30px;
  height: 30px;
  margin: -4px 0;
}
/* Quests: the quest points beside the count, and each open quest's painted scene (640×360). */
.iface-tools .qp-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 600 11px / 1 var(--ui-font);
  color: var(--ui-text);
}
.iface-tools .qp-pill .ui-art {
  width: 16px;
  height: 16px;
}
.qj-detail .qj-art {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 2px 0 8px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-slot-line);
  background: var(--ui-cell) center / cover no-repeat;
}
/* Orbs and buttons drawn by their own modules: the run orb (game/ui/run.js; walking or running), the chat button
   (features/chat.js) and the duel's Throw (ui/context.js). The line figures stay underneath, hidden. */
#orb-run .man,
#chat-button > svg {
  visibility: hidden;
}
#orb-run::after,
#chat-button::before {
  content: "";
  position: absolute;
  inset: 18%;
  background: url(art/ui/orbs/run-walk.png) center / contain no-repeat;
  pointer-events: none;
}
html body #orb-run.on::after {
  background-image: url(art/ui/orbs/run-run.png);
}
#chat-button::before {
  inset: 20%;
  background-image: url(art/ui/orbs/chat.png);
}
#context #throw-button {
  justify-content: flex-start;
  gap: 8px;
}
#context #throw-button > span {
  margin-left: auto;
}
#context #throw-button::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background: url(art/ui/combat/throw.png) center / contain no-repeat;
}
/* The compass face turns with the camera (hud.js); its red point is north, so the drawn needle and N stand down. */
html body #compass .rose {
  background: url(art/ui/orbs/compass.png) center / contain no-repeat;
}
#compass .rose b,
#compass .rose::before,
#compass .rose::after {
  visibility: hidden;
}
/* Your grave's plate in the world. */
html body .world-label.grave .plate-name::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: -3px 4px 0 0;
  background: url(art/ui/death/grave.png) center / contain no-repeat;
}
/* The creator: painted body tiles and the Randomize die. */
html body .body-tile .glyph {
  width: 40px;
  height: 40px;
  background: url(art/ui/creator/body-male.png) center / contain no-repeat;
}
html body .body-tile .glyph.female {
  background-image: url(art/ui/creator/body-female.png);
}
html body .body-tile .glyph::before,
html body .body-tile .glyph::after {
  display: none;
}
html body .look-roll:has(> i) {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
html body .look-roll > i {
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  font-size: 0;
  color: transparent;
  background: url(art/ui/creator/randomize.png) center / contain no-repeat;
}
#target-box .tb-hp .ui-art,
.world-label.monster .plate-info .ui-art {
  width: 13px;
  height: 13px;
}
#target-box .tb-coach > div > .ui-art {
  flex: none;
  width: 20px;
  height: 20px;
}
#target-box small .tb-weak {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: -2px 4px 0 0;
}
html body #notice .notice-mark.painted {
  width: 28px;
  height: 28px;
  background: none;
}
html body #notice .notice-mark .ui-art {
  width: 28px;
  height: 28px;
}
#toasts .toast .toast-mark {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  margin: -3px 6px 0 0;
}
.coin-chip .ui-art,
.pack-foot .ui-art {
  width: 18px;
  height: 18px;
}
.shelf-card .price .ui-art {
  width: 13px;
  height: 13px;
}
#panel-heading h2 .ui-art {
  width: 26px;
  height: 26px;
}
#iface-content .doll-stats .ui-art {
  width: 16px;
  height: 16px;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #iface-content .doll-stats .ui-art {
    display: none;
  }
}
.empty-state > .ui-art {
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
}
/* The People list with no one else in it: the lone bench (art/brand/empty/friends, 4:3). */
.empty-state > img.ui-art.people-empty {
  display: block;
  width: 136px;
  height: 102px;
  object-fit: contain;
}

/* ---- Log, records and crests (ART-NEEDED-2 Part 2, drawn at twice the size shown): the windows' place crests, the
   Achievements log's tabs, medals, diary emblems and seals, the collection banners, tunes, ranks and honours. ---- */
#panel-heading h2 .ui-art.crest {
  width: 30px;
  height: 30px;
}
#panel-content > .log-tabs > button .ui-art {
  width: 26px;
  height: 26px;
}
.list-mark.painted {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
}
.list-row.done .list-mark.painted {
  background: none;
}
.list-mark .ach-medal {
  width: 40px;
  height: 40px;
}
.section-title.has-art {
  justify-content: flex-start;
  align-items: center;
}
.section-title.has-art > span {
  margin-left: auto;
}
.section-title .title-art {
  width: 20px;
  height: 20px;
}
.section-title .page-complete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ui-good);
}
#panel .log-banner {
  width: 100%;
  max-width: 256px;
  height: 64px;
  margin: 6px auto 0;
}
.claimed-seal {
  display: inline-flex;
}
.claimed-seal .ui-art {
  width: 26px;
  height: 26px;
}
.rank-medal {
  display: inline-grid;
  place-items: center;
}
.rank-medal > * {
  grid-area: 1 / 1;
}
.rank-medal b {
  font: 700 10px / 1 var(--ui-font);
  color: #2b2414;
}
.record-game h3 .record-crest {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  margin: -3px 6px 0 0;
}
/* The unseen-creature and unfound-pet pictures are already silhouettes: no extra greying. */
.list-row.unknown .slot-icon .unknown-art {
  filter: none;
}
.record-honours li .honour-art {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin: -2px 5px 0 0;
}
/* Honours under a record strip (the player card, the Kout board): a tight row, light words on the dark card. */
.record-strip .record-honours {
  margin: 2px 0 8px;
}
#chat-person .record-strip .record-honours li {
  padding: 3px 8px;
  color: var(--cream);
}
#trade-sheet .tcoins .ui-art {
  width: 28px;
  height: 28px;
}

/* ---- Commerce pictures (ART-NEEDED-2 Part 2, drawn at twice the size shown): coin heaps, the bank's tabs and empty
   states, the Exchange, the trade banner and sheet, the worn doll's empty slots and the Commons paintings. ---- */
#panel .win-empty > .ui-art.empty-art {
  width: 96px;
  height: 96px;
  margin-bottom: 2px;
}
#panel .win-empty > .ui-art.empty-art.small {
  width: 48px;
  height: 48px;
}
.seg > button .ui-art {
  width: 22px;
  height: 22px;
}
#panel .ge-go .ui-art {
  width: 26px;
  height: 26px;
}
#panel .ge-slot-foot .ui-art {
  width: 20px;
  height: 20px;
}
#panel .ge-slot.empty .ge-slot-art {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
#panel .ge-state .ge-state-art,
#panel .ge-guide .ui-art {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  margin: -3px 4px 0 0;
}
#panel .win-strip .ui-art {
  width: 22px;
  height: 22px;
}
#panel .ge-total b .ui-art {
  width: 28px;
  height: 28px;
}
#trade-banner .tb-art {
  width: 32px;
  height: 32px;
}
#trade-sheet header .eyebrow .eyebrow-art {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin: -4px 6px 0 0;
}
#trade-sheet .trow .tcoin {
  cursor: default;
}
/* The silhouettes are painted solid cream; the empty slot keeps them faint, as its line icon was. */
.doll-slot.empty .slot-art {
  width: 32px;
  height: 32px;
  opacity: 0.2;
}
.pavilion-art.painted {
  overflow: hidden;
}
.pavilion-art .pavilion-pic {
  display: block;
  width: 100%;
  height: 100%;
  background: center / contain no-repeat;
}
.project-pic,
.vote-grid .vote-pic {
  display: block;
  aspect-ratio: 680 / 300;
  background: center / contain no-repeat;
}
.project-pic {
  width: 72px;
  max-height: 36px;
  margin: 2px 0 4px;
}
.vote-grid .vote-pic {
  width: 40px;
  margin: 0 auto 2px;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  #chat-person {
    width: min(280px, calc(100vw - 30px));
    max-height: calc(100dvh - 150px);
  }

  #panel[data-kind="games"] #panel-heading p,
  #panel[data-kind="records"] #panel-heading p {
    font-size: 12px;
  }
  #build-version {
    bottom: var(--safe-bottom);
    font-size: 10px;
    line-height: 12px;
    padding: 0 6px;
  }
  #minimap {
    right: 19px;
  }
  html body .seg-tabs.words > button span {
    display: inline;
  }
  html body #notice {
    top: max(32vh, calc(env(safe-area-inset-top) + 220px));
    font-size: 13px;
  }
  #panel .win-empty > .ui-art.empty-art {
    width: 72px;
    height: 72px;
  }
}
@media (max-height: 520px) and (min-width: 701px), (max-height: 500px) and (orientation: landscape) {
  .doll-well .doll-slot.empty .slot-art {
    width: 22px;
    height: 22px;
  }
}
#fatal {
  overflow-y: auto;
}
#fatal .fatal-art {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 8px;
}

/* part2b panels */
/* The region title card (hud.js regionCard): the region's painting, its name over the lower edge, fading out. */
#region-card {
  position: fixed;
  left: 50%;
  top: 24%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  width: min(480px, calc(100vw - 32px));
  aspect-ratio: 4 / 1;
  display: grid;
  place-items: end center;
  pointer-events: none;
  animation: region-card-in 0.6s ease-out;
  transition: opacity 0.7s;
}
#region-card.out {
  opacity: 0;
}
#region-card .region-card-art {
  position: absolute;
  inset: 0;
  background: center / contain no-repeat;
  filter: drop-shadow(0 8px 14px rgba(20, 30, 20, 0.35));
}
#region-card h2 {
  position: relative;
  margin: 0 0 -6px;
  font: 400 clamp(20px, 6vw, 28px) Georgia, serif;
  color: #fff6dc;
  text-shadow: 0 2px 4px #14332299, 0 0 18px #143322cc;
}
@keyframes region-card-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}
body.kout-open #region-card,
.protocol-open > #region-card {
  display: none;
}
/* The duel's end card (hud.js) above the score. */
#duel-hud .duel-end-art {
  display: block;
  width: 160px;
  height: 80px;
  margin: -4px auto 2px;
  background: center / contain no-repeat;
}
/* Cape, diary and town perk pictures beside their words. */
.perk-art.item-thumb {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 4px;
  flex: none;
}
#panel .diary-perk .perk-art.item-thumb {
  width: 16px;
  height: 16px;
  margin: 0;
}
/* A finished daily task's green stamp in place of the Claimed pill. */
.claimed-seal.daily-stamp .ui-art {
  width: 30px;
  height: 30px;
}
/* Ribboned rank medals (art/ui/rank-1..3) in the hiscores and Lantern Court boards. */
.rank-medal,
.rank-medal .ui-art {
  width: 28px;
  height: 28px;
}
.record-rank:has(.rank-medal) {
  width: 28px;
}
/* Slayer: the streak strap in the title, and a corner seal on a picture (a boss task, a ground not yet open). */
.section-title .streak-art.item-thumb {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 2px;
}
.slot-icon.has-badge {
  position: relative;
}
.slot-icon .slot-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 20px;
  height: 20px;
  background: center / contain no-repeat;
  pointer-events: none;
}
/* A quest started: the folded note with its half-broken seal (art/quests/started-note.png, 600×200 at 2×). The bottom
   slice starts above the seal (y 110–160) so the seal sits whole in the corner and is never stretched. */
.quest-moment:not(.done) {
  border-width: 25px 65px 45px 30px;
  border-image: url(art/quests/started-note.png) 50 130 90 60 fill / 25px 65px 45px 30px stretch;
}
/* wire-82 panels */
/* Painted marks where the windows drew line icons: notes, chips, buttons, quest lines and small badges. */
:is(#iface-content, #dialogue-box, #item-info, #make-x, #trade-sheet, #panel) .note > .note-art,
.note > .note-art {
  width: 20px;
  height: 20px;
  flex: none;
}
:where(#panel, #iface-content) button > .ui-art {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.icon-btn > .ui-art {
  width: 22px;
  height: 22px;
  margin: auto;
}
.chip-row .pill > .ui-art,
.pill.reward-chip > .item-thumb {
  flex: none;
  width: 16px;
  height: 16px;
}
.win-note > .ui-art,
.hearth-chip > .ui-art {
  flex: none;
  width: 18px;
  height: 18px;
}
.diary-tasks li > .ui-art {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
}
#panel .emote small > .ui-art,
#panel .prod-cell .prod-lv > .ui-art {
  flex: none;
  width: 12px;
  height: 12px;
}
.qj-detail p > .ui-art,
.qj-tracked > .ui-art {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 5px -3px 0;
  vertical-align: baseline;
}
.qj-tracked > .ui-art {
  margin: 0;
}
.resident-where > .ui-art {
  display: inline-block;
  flex: none;
  width: 13px;
  height: 13px;
}
/* wire-82 item */
/* Painted art with its line icon kept for an image that fails to load (iteminfo, the duel and echo cards, the bank supplies). */
.art-or > img {
  object-fit: contain;
}
.art-or:has(> img) > svg {
  display: none;
}
.art-or > svg {
  width: 14px;
  height: 14px;
}
.ii-ic .art-or > img {
  width: 22px;
  height: 22px;
}
.ii-tags .pill .art-or > img {
  width: 14px;
  height: 14px;
}
#item-info .ii-foot .art-or > img {
  width: 18px;
  height: 18px;
}
.supplies .art-or {
  display: grid;
  margin: 0 auto 3px;
}
.supplies .art-or > img {
  width: 22px;
  height: 22px;
}
#context button:is([data-dodge], [data-echo-wave], [data-echo-cheer]) {
  justify-content: flex-start;
  gap: 8px;
}
#context button[data-dodge] > .key-hint {
  margin-left: auto;
}
#context button .art-or > img {
  width: 22px;
  height: 22px;
}

/* wire-82 wiki */
/* Painted art (wiki.js paint) as an <img>: kept whole; a banner crop fills its box. Falls back to the line icon. */
.wiki-paint {
  object-fit: contain;
}
.wiki-paint.wiki-crop {
  object-fit: cover;
  border-radius: 6px;
}
#panel :is(.wiki-act, .wiki-chip.plain > .wiki-ic, .wiki-chip .wiki-ic) > .wiki-paint {
  width: 22px;
  height: 22px;
}
#panel .wiki-act > .wiki-paint {
  margin: -4px 0;
}
#panel .wiki-lv .wiki-paint {
  width: 18px;
  height: 18px;
}
/* The round Walk-to button's boots (art/guide/ui/walk). */
#panel .wiki-go > .wiki-paint {
  width: 26px;
  height: 26px;
}
#panel .wiki-tick {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}
#panel .wiki-band > summary .wiki-band-art {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  vertical-align: middle;
}
html body #panel :is(.map-row-acts, .map-card-acts) .wiki-paint,
html body #panel .map-jump-btn .wiki-paint {
  display: inline-block;
  width: 18px;
  height: 18px;
}
html body #panel .map-foot .wiki-paint,
.lode-status .wiki-paint {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: middle;
}
.map-row-art .wiki-paint {
  width: 28px;
  height: 28px;
}
.lode-icon > i .wiki-paint {
  width: 13px;
  height: 13px;
}
/* wire-82 misc */
/* Painted marks wired in place of line icons (chapel, dialogue, tutorial, toasts, HUD, chat, people). */
.wire-mark {
  display: inline-block;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
/* A painted picture over its line icon: the icon shows only once a failed image has removed itself. */
.art-or {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--ui-icon, 22px);
  height: var(--ui-icon, 22px);
  vertical-align: middle;
}
.art-or > * {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.art-or img + svg {
  display: none;
}
.art-or.quest-art img {
  object-fit: cover;
  border-radius: 4px;
}
.slot-icon .art-or.quest-art {
  width: 32px;
  height: 32px;
}
#quest .quest-next > .art-or:first-child {
  flex: none;
  width: 22px;
  height: 22px;
}
.quest-step .art-or {
  width: 16px;
  height: 16px;
}
#players .wire-mark {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
html body #toasts .toast .toast-go .toast-go-art {
  width: 20px;
  height: 20px;
}
#toasts .toast small .toast-label-art {
  display: inline-block;
  vertical-align: -2px;
  width: 12px;
  height: 12px;
  margin-right: 4px;
}
html body #duel-hud .duel-hearts .art-or {
  width: 18px;
  height: 18px;
}
#duel-hud .duel-hearts i:not(.on) .art-or img {
  filter: grayscale(1) brightness(0.6);
  opacity: 0.45;
}
#duel-hud small .duel-crest {
  display: inline-block;
  vertical-align: -3px;
  width: 14px;
  height: 14px;
  margin-right: 5px;
}
.chat-mark,
.chat-mark img {
  display: inline-block;
  vertical-align: -2px;
  width: 14px;
  height: 14px;
}
.mirror-card .mirror-card-art {
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
}
/* An achievement earned: the painted banner (art/ui/achievement-toast) with the medal in its laurel ring. A parchment
   panel under the banner stands in if the picture fails. */
html body #toasts .toast.level.achievement {
  width: 288px;
  max-width: calc(100vw - 24px);
  height: 72px;
  box-sizing: border-box;
  padding: 0 34px 0 16px;
  gap: 14px;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: transparent;
  background-image: url(art/ui/achievement-toast.png), linear-gradient(#ead9ae, #ead9ae);
  /* The stand-in panel sits inside the banner's parchment, so its corners never show past the painted edge. */
  background-size: 100% 100%, 70% 62%;
  background-position: center, 70% 50%;
  background-repeat: no-repeat;
  color: #3d2a12;
}
html body #toasts .toast.achievement .toast-burst,
html body #toasts .toast.achievement .toast-art {
  width: 40px;
  height: 40px;
}
#toasts .toast.achievement .toast-burst::before {
  content: none;
}
html body #toasts .toast.achievement small {
  color: #8a5d12;
  line-height: 1;
}
html body #toasts .toast.achievement strong {
  color: #3d2a12;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body #toasts .toast.achievement span {
  color: #5c4626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body #toasts .toast.achievement > div {
  padding-top: 3px;
  min-width: 0;
}
/* wire-c map */
html body #panel .map-search-icon > .wiki-paint {
  width: 20px;
  height: 20px;
}
.win-search > .wiki-paint {
  position: absolute;
  left: 7px;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* wire-c brand */
/* Loading: the painted sprout (art/brand/loading-sprout.png, six 128px frames) rides the tip of the gold fill and grows
   from seed to sapling once, then holds; reduced motion shows the sapling. */
#loading .load-fill {
  position: relative;
}
#loading .load-fill::after {
  content: '';
  position: absolute;
  right: -17px;
  bottom: calc(100% - 4px);
  width: 34px;
  height: 34px;
  background: url(art/brand/loading-sprout.png) 0 0 / 204px 34px no-repeat;
  filter: drop-shadow(0 2px 4px rgba(6, 12, 10, 0.6));
  pointer-events: none;
  animation: wire-c-sprout 2.4s steps(5, jump-end) 0.2s forwards;
}
@keyframes wire-c-sprout {
  to {
    background-position: -170px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* body.motion-ok (layout.js) means the player saved Reduced motion off: their choice beats the system. */
  body:not(.motion-ok) #iface-tabs .pack-bump .pack-count {
    animation: none;
  }
  body:not(.motion-ok) #loading .load-fill {
    transition: none;
  }
  body:not(.motion-ok) #slayer-tracker .st-orb,
  body:not(.motion-ok) #slayer-tracker .st-new,
  body:not(.motion-ok) #slayer-tracker .st-count {
    animation: none !important;
  }
  body:not(.motion-ok) html body #action-bar button.pp.praying {
    animation: none;
  }
  body:not(.motion-ok) #loading .load-fill::after {
    animation: none;
    background-position: -170px 0;
  }
}
/* The held reconnect line (main.js offlineNotice): the sleeping pigeon instead of the round mark. */
html body #notice .notice-mark.painted:has(.wire-offline) {
  width: 52px;
  height: 39px;
}
html body #notice .notice-mark .wire-offline {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The boot failure card (main.js): the toppled cart and its goblin; the old fatal mark stays the fallback. */
#fatal .fatal-art.wire-crash {
  width: min(200px, 70%);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
/* wire-c games */
/* The Lantern Court emblem and the Banana Protocol mark head their Sit prompts (scenes/kout.js, scenes/protocol.js). */
#kout-sit .sit-crest,
#protocol-sit .sit-crest {
  float: right;
  width: 44px;
  height: 44px;
  margin: -6px -6px 4px 8px;
  object-fit: contain;
}
/* wire-c ui */
/* Life bar marks (actionbar.js): well fed and a boon, small at the bar's right end. */
#action-bar .lp .lp-buffs {
  position: absolute;
  right: 3px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
}
/* With marks, the life numbers take the room left of them, so a narrow bar never puts a star on the last digit. */
#action-bar .lp:has(> .lp-buffs) {
  display: flex;
}
#action-bar .lp:has(> .lp-buffs) > span:not(.lp-buffs) {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: safe center;
  white-space: nowrap;
}
/* A bar too narrow for both (actionbar.js lpFit): first the heart goes, then the numbers step down a size. */
#action-bar .lp[data-tight] > span:not(.lp-buffs) > .ui-art {
  display: none;
}
#action-bar .lp[data-tight="2"] > span:not(.lp-buffs) {
  font-size: 10px;
  letter-spacing: -0.2px;
}
#action-bar .lp > .lp-buffs {
  position: relative;
  right: auto;
  flex: none;
  padding-right: 3px;
}
#action-bar .lp .lp-buff {
  display: block;
  pointer-events: auto;
}
#action-bar .lp .lp-buff .ui-art {
  width: 14px;
  height: 14px;
}
/* A unique weapon's special ready: its painted star on the ability slot's corner. */
#action-bar .bar-slot .ab-special {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 190, 90, 0.8));
}
/* A boss's painted bar (art/ui/boss-hpbar): the life in the channel, the boss in the crest ring, a gem dimmed per phase. */
#target-box .tb-boss {
  position: relative;
  width: calc(100% + 12px);
  margin: 3px -6px 1px;
  aspect-ratio: 8 / 1;
  background: url(art/ui/boss-hpbar.png) center / 100% 100% no-repeat;
}
#target-box .tb-boss-fill {
  position: absolute;
  left: 25.6%;
  width: 55.4%;
  top: 43%;
  height: 18%;
  background: #3a1d1a;
  overflow: hidden;
}
#target-box .tb-boss-fill i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(#e0574d, #8f2620);
}
#target-box .tb-boss-crest {
  position: absolute;
  left: 18.9%;
  top: 49%;
  width: 6.6%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: #2a2016;
}
#target-box .tb-boss-crest .item-thumb {
  width: 100%;
  height: 100%;
}
#target-box .tb-boss-pips b {
  position: absolute;
  top: 68.8%;
  width: 4.2%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
}
#target-box .tb-boss-pips b:nth-child(1) { left: 43%; }
#target-box .tb-boss-pips b:nth-child(2) { left: 49.8%; }
#target-box .tb-boss-pips b:nth-child(3) { left: 56.4%; }
#target-box .tb-boss-pips b.gone {
  background: rgba(16, 12, 8, 0.7);
}
#target-box .tb-boss-text {
  position: absolute;
  left: 25.6%;
  width: 55.4%;
  top: 2%;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 1px 1px 0 #000, 0 0 3px #000;
  font-variant-numeric: tabular-nums;
}
/* An emote unlocked: the emote in the painted card's socket (art/ui/emote-card). */
#toasts .toast .emote-card-mark {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 26px;
  height: 32px;
  margin: -6px 8px -4px 0;
  background: url(art/ui/emote-card.png) center / contain no-repeat;
}
#toasts .toast .emote-card-mark > * {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
}
/* A clue read on its parchment (art/trails/clue-card), the step's picture ahead of the line. */
html body #toasts .toast.clue-read {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(340px, calc(100vw - 32px));
  min-height: 60px;
  padding: 14px 34px 14px 28px;
  background: url(art/trails/clue-card.webp) center / 100% 100% no-repeat;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: #3b2a17;
  font-weight: 600;
}
html body #toasts .toast.clue-read .toast-mark {
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0;
}
/* A casket opened: the prize over the open casket's light (art/trails/casket-open). */
html body #toasts .toast.casket .toast-icon {
  width: 56px;
  height: 42px;
  border: 0;
  place-items: start center;
  background: url(art/trails/casket-open.webp) center / contain no-repeat;
}
#toasts .toast.casket .toast-icon .item-thumb {
  width: 20px;
  height: 20px;
  margin-top: 3px;
}
/* Painted marks in place of line icons: search fields, timers, residents, the item card, the trade's waiting pills. */
.win-search > .ui-art {
  position: absolute;
  left: 8px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.win-hint > .ui-art,
.resident-lamp {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  vertical-align: -3px;
  margin-right: 3px;
}
#item-info .ii-cmp small .art-or,
#item-info .ii-note .art-or {
  width: 14px;
  height: 14px;
  vertical-align: -3px;
  margin-right: 3px;
}
#item-info .ii-cmp small .art-or > img,
#item-info .ii-note .art-or > img {
  width: 14px;
  height: 14px;
}
#trade-sheet .tstatus .trade-wait {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}
.look-roll .undo-art {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}
/* The Worn tab's painted body (art/ui/slots/doll-figure) behind the slots. */
.doll-figure.doll-art {
  background: center / contain no-repeat;
  opacity: 0.08;
}
/* The touch joystick: the carved ring and the amber thumb stone (art/ui/joystick-ring, -thumb). */
#joystick .stick-ring {
  background: url(art/ui/joystick-ring.png) center / contain no-repeat;
  border: 0;
  backdrop-filter: none;
}
#joystick .stick-thumb {
  background: url(art/ui/joystick-thumb.png) center / contain no-repeat;
  border: 0;
  box-shadow: none;
}
/* HUD layout (game/ui/layout.js, Settings › Layout): the minimap toggle, the chat minimised to its
   button with an unread count, hidden game-message lines, XP tracker and key hints, and the trackers' unpin pins. */
body {
  --map-control: 44px;
  --map-toggle-space: calc(var(--map-control) + 6px);
  --map-compact-width: calc(4 * var(--map-control) + 18px);
}
@media (any-pointer: coarse) {
  body {
    /* Interface scaling must not shrink a touch target below 44 screen pixels. */
    --map-control: max(44px, calc(44px / var(--ui-scale, 1)));
  }
}
html body #minimap-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--map-control);
  height: var(--map-control);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: var(--ui-win);
  border: 1px solid var(--ui-line);
  color: var(--ui-text);
  cursor: pointer;
  z-index: 4;
  opacity: 0.72;
}
html body #minimap-toggle:hover,
html body #minimap-toggle:focus-visible {
  opacity: 1;
}
html body #minimap-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
#chat-min {
  background: transparent;
  color: var(--ui-accent);
  width: 28px;
  height: 30px;
  font-size: 16px;
  line-height: 1;
}
@media (max-width: 1000px) {
  #chat-min {
    display: none;
  }
}
@media (min-width: 1001px) {
  #chat-row {
    display: none;
  }
  body.hud-chat-min #chat-row {
    display: flex;
  }
  /* Chat minimised to its 48px button: the game lines float again, and the bar stops centring on a full chat box. */
  html body.hud-chat-min #game-log {
    display: flex;
    bottom: calc(76px + var(--safe-bottom));
  }
  html body.hud-chat-min #action-bar {
    left: calc(28px + 48px);
  }
}
html body #chat-dot:not([hidden]):not(:empty) {
  top: -3px;
  right: -3px;
  width: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  color: #1e332a;
  font: 700 11px / 18px var(--ui-font);
  font-style: normal;
  text-align: center;
  z-index: 1;
}
body.hud-no-notes #game-log,
body.hud-no-xp #trackers > #xp-tracker,
body.hud-no-keys :is(#action-bar, #map-cluster, #context) kbd {
  display: none !important;
}
/* A tracker's pin/X (top-right corner): always visible, faded until hovered or focused, a 44px hit area on touch.
   Pinned reads full-strength (.on); the X sits just left of the pin. The "+n" chip folds unpinned extras (layout.js). */
#trackers > * {
  position: relative;
}
#trackers > .tracker-stacked {
  display: none !important;
}
#trackers .hud-pin {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ui-win);
  border: 1px solid var(--ui-trim);
  color: var(--ui-accent);
  cursor: pointer;
  opacity: 0.45;
  pointer-events: auto;
  transition: opacity 0.15s;
}
#trackers .hud-pin.on {
  opacity: 0.9;
}
#trackers .hud-pin.hud-x {
  right: 24px;
}
#trackers > #slayer-tracker .hud-pin {
  top: -6px;
  left: -6px;
  right: auto;
}
#trackers > #slayer-tracker .hud-pin.hud-x {
  left: 22px;
}
#trackers .hud-pin svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
#trackers > :is(:hover, :focus-within) .hud-pin {
  opacity: 1;
}
@media (pointer: coarse) {
  #trackers .hud-pin {
    width: 44px;
    height: 44px;
  }
  #trackers .hud-pin.hud-x {
    right: 42px;
  }
  #trackers > #slayer-tracker .hud-pin.hud-x {
    left: 40px;
  }
}
#trackers > #tracker-more {
  align-self: flex-start;
  min-width: 44px;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  font: 700 12px / 1 var(--ui-font);
  cursor: pointer;
}
#trackers > #target-box.collapsed > :is(.tb-move, .tb-coach, small) {
  display: none;
}

/* Records art (ART-NEEDED-2): a quest's vignette leads its started/complete card with the seal on its corner
   (features/quests.js moment); a locked quest's row wears the grey wax padlock (art/quests/locked.png) for its dot;
   Bryn's marks line carries the store chest. */
.quest-moment-icon {
  position: relative;
  flex: none;
}
.quest-moment-icon .quest-moment-art {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.quest-moment-icon:has(.quest-moment-art) .item-thumb {
  position: absolute;
  right: -8px;
  bottom: -6px;
  width: 34px;
  height: 34px;
}
.qj[data-status="locked"] .qj-dot {
  width: 16px;
  height: 16px;
  border-radius: 0;
  box-shadow: none;
  background: url(art/quests/locked.png) center / contain no-repeat;
}
.slayer-purse .ui-art {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
}
.subtext.slayer-purse {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Painted UI marks (ART-NEEDED-2/3, ui lane): deposits, quest seals, gestures, methods, tabs, cursors and more. */
#panel .dep-actions .dep-art {
  width: 22px;
  height: 22px;
}
#panel .icon-toggle[data-bank-ph] .ui-art {
  width: 20px;
  height: 20px;
}
/* The quest journal's status seals stand in for the coloured dots; a locked quest keeps its grey dot. */
.qj:is([data-status="ready"], [data-status="active"], [data-status="done"]) .qj-dot {
  width: 16px;
  height: 16px;
  border-radius: 0;
  box-shadow: none;
}
.qj[data-status="ready"] .qj-dot {
  background: url(art/ui/quests/status-ready.png) center / contain no-repeat;
}
.qj[data-status="active"] .qj-dot {
  background: url(art/ui/quests/status-progress.png) center / contain no-repeat;
}
.qj[data-status="done"] .qj-dot {
  background: url(art/ui/quests/status-done.png) center / contain no-repeat;
}
.qj-step > .ui-art,
#panel .qj-detail button > .ui-art,
#panel .hiscore-list .ui-art,
#panel .secondary-button > .ui-art {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -5px;
}
/* A phone's gesture chips: the painted hand beside its word. */
#quest .quest-touch span {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 5px;
  align-items: center;
}
#quest .quest-touch .touch-art {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  background: center / contain no-repeat;
}
.contributor > span > .ui-art,
.list-row.unknown .slot-icon .ui-art,
.setting button > .ui-art {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 4px;
}
.list-row.unknown .slot-icon .ui-art {
  width: 26px;
  height: 26px;
  margin: 0;
}
/* Settings' section tabs and the chat log's tabs carry their pictures. */
#panel-tabs .tab-art {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  vertical-align: -4px;
}
/* The Looking Glass rows: each part's small picture before its name. */
.look-name .look-art {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  vertical-align: -4px;
  background: center / contain no-repeat;
}
#mirror-sheet .mirror-card-art {
  width: 48px;
  height: 48px;
  margin: 0 auto 4px;
}
/* The fight's target box: the difficulty gem ahead of its word. */
#target-box .tb-name em .tb-diff {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -1px;
}
/* Hiscores' Kout and Banana Protocol tiles: green felt and brass under a dark wash so the numbers read. */
.record-tiles > .rt-kout {
  background: linear-gradient(rgba(12, 20, 16, 0.55), rgba(12, 20, 16, 0.55)), url(art/ui/record-tile-kout.png) center / cover;
}
/* The creator's and the Looking Glass's style rows: the chosen option's painted picture beside its arrows. */
.look-part .look-thumb {
  flex: none;
  width: 42px;
  height: 42px;
  object-fit: contain;
  pointer-events: none;
}
/* The minimap's painted rim (game/ui/layout.js places it from the map's size); the orbs round it sit on top. */
html body #minimap-frame {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: url(art/ui/orbs/minimap-frame.png) center / contain no-repeat;
}
html body #minimap-frame[hidden] {
  display: none;
}
#map-cluster > :is(#orb-map, #settings) {
  z-index: 4;
}
/* Minimised or hidden minimap: two rows keep every control at the corner. The toggle's top-right cell matches its
   expanded position; the run ring and compass rose keep their own relative containing boxes. */
html body.hud-map-min #map-cluster {
  width: var(--map-compact-width);
  height: auto;
  padding-top: 0;
  display: grid;
  grid-template-columns: repeat(4, var(--map-control));
  grid-template-rows: repeat(2, var(--map-control));
  align-items: center;
  gap: 6px;
}
html body.hud-map-min #map-cluster > * {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
}
html body.hud-map-min #map-cluster > :is(#minimap, #minimap-frame) {
  display: none;
}
html body.hud-map-min #map-cluster > button {
  width: var(--map-control);
  height: var(--map-control);
  min-height: var(--map-control);
  margin: 0;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
html body.hud-map-min #map-cluster > #compass {
  grid-area: 1 / 1;
}
html body.hud-map-min #map-cluster > #orb-map {
  grid-area: 1 / 2;
}
html body.hud-map-min #map-cluster > #settings {
  grid-area: 1 / 3;
}
html body.hud-map-min #map-cluster > #minimap-toggle {
  grid-area: 1 / 4;
}
html body.hud-map-min #map-cluster > #orb-run {
  grid-area: 2 / 1;
}
html body.hud-map-min #players .wire-mark {
  display: none;
}
html body.hud-map-min #map-cluster > .cluster-status {
  grid-area: 2 / 3 / 3 / 5;
  height: var(--map-control);
  display: grid;
  gap: 0;
}
html body.hud-map-min #players {
  position: relative;
  width: 100%;
  height: var(--map-control);
  min-width: 0;
  min-height: var(--map-control);
  justify-content: center;
  margin: 0;
  padding: 0 6px;
  font-size: 11px;
  letter-spacing: 0;
}
html body.status-aside:not(.hud-map-min) #map-cluster > .cluster-status {
  position: relative;
  left: calc((var(--iface-w) + 8px) / var(--ui-scale, 1) * -1);
}
html body.hud-map-min .cluster-status :is(#events-chip, #minigame-chip) {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
}
html body.hud-map-min .cluster-status:has(#events-chip:not([hidden])) #minigame-chip {
  top: calc(100% + 48px);
}
html body.hud-map-min .cluster-status:has(#connection:not([hidden])) #events-chip {
  top: calc(100% + 48px);
}
html body.hud-map-min .cluster-status :is(#connection, #saved) {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
}
html body.hud-map-min #saved:empty,
html body.hud-map-min .cluster-status:has(#connection:not([hidden])) #saved {
  display: none;
}
@media (max-width: 700px) and (orientation: portrait) {
  html body.hud-map-min #message-rail,
  html body.hud-map-min #message-rail:has(#quest.compact:not([hidden])) {
    width: min(var(--message-width), calc(100vw - var(--map-compact-width) * var(--ui-scale, 1)
      - max(var(--hud-m), env(safe-area-inset-left)) - max(var(--hud-m), env(safe-area-inset-right)) - 8px));
  }
}
/* A creature's overhead life bar in the painted leather and brass bar (art/ui/enemy-hpbar, its rim and riveted ends as
   a 9-slice); the life and the loss inside keep their own colours, so the bar still reads if the picture is missing. */
.world-label.monster .plate-hp i {
  background: #62b24d;
}
.record-tiles > .rt-protocol {
  background: linear-gradient(rgba(20, 14, 6, 0.62), rgba(20, 14, 6, 0.62)), url(art/ui/record-tile-protocol.png) center / cover;
}
.record-tiles > :is(.rt-kout, .rt-protocol) :is(strong, span) {
  color: #f3ead2;
}
/* A rare drop's item sits in the painted glow. */
html body #toasts .toast.drop .toast-icon {
  background: url(art/ui/toasts/drop-glow.png) center / 150% no-repeat;
}
/* Painted cursors over the world (art/ui/cursors, 32 px with a 2× set): what the pointer is on picks the picture
   (features/targeting.js cursorFor); each falls back to the system cursor. */
#world {
  cursor: url(art/ui/cursors/default.png) 4 4, auto;
  cursor: image-set(url(art/ui/cursors/default.png) 1x, url(art/ui/cursors/default-2x.png) 2x) 4 4, auto;
}
#world[data-cursor="interact"] {
  cursor: url(art/ui/cursors/interact.png) 4 3, pointer;
  cursor: image-set(url(art/ui/cursors/interact.png) 1x, url(art/ui/cursors/interact-2x.png) 2x) 4 3, pointer;
}
#world[data-cursor="talk"] {
  cursor: url(art/ui/cursors/talk.png) 4 4, pointer;
  cursor: image-set(url(art/ui/cursors/talk.png) 1x, url(art/ui/cursors/talk-2x.png) 2x) 4 4, pointer;
}
#world[data-cursor="attack"] {
  cursor: url(art/ui/cursors/attack.png) 3 2, pointer;
  cursor: image-set(url(art/ui/cursors/attack.png) 1x, url(art/ui/cursors/attack-2x.png) 2x) 3 2, pointer;
}
#world[data-cursor="take"] {
  cursor: url(art/ui/cursors/take.png) 14 14, pointer;
  cursor: image-set(url(art/ui/cursors/take.png) 1x, url(art/ui/cursors/take-2x.png) 2x) 14 14, pointer;
}
#world[data-cursor="chop"] {
  cursor: url(art/ui/cursors/chop.png) 6 5, pointer;
  cursor: image-set(url(art/ui/cursors/chop.png) 1x, url(art/ui/cursors/chop-2x.png) 2x) 6 5, pointer;
}
#world[data-cursor="mine"] {
  cursor: url(art/ui/cursors/mine.png) 5 3, pointer;
  cursor: image-set(url(art/ui/cursors/mine.png) 1x, url(art/ui/cursors/mine-2x.png) 2x) 5 3, pointer;
}
#world[data-cursor="fish"] {
  cursor: url(art/ui/cursors/fish.png) 2 2, pointer;
  cursor: image-set(url(art/ui/cursors/fish.png) 1x, url(art/ui/cursors/fish-2x.png) 2x) 2 2, pointer;
}
button:disabled {
  cursor: url(art/ui/cursors/blocked.png) 4 4, not-allowed;
  cursor: image-set(url(art/ui/cursors/blocked.png) 1x, url(art/ui/cursors/blocked-2x.png) 2x) 4 4, not-allowed;
}
/* A worn title between the painted gold scroll-end flourishes (art/ui/cosmetics/title-ornament, its two ends as the
   sides of a border image): the Titles row of the achievements and another player's nameplate. Without the picture the
   sides stay clear. */
.title-orn {
  display: inline-block;
  border: solid transparent;
  border-width: 0 12px;
  border-image: url(art/ui/cosmetics/title-ornament.png) 0 34 / 0 12px stretch;
  padding: 0 3px;
}
.world-label.resident small .title-orn {
  border-width: 0 10px;
  border-image-width: 0 10px;
}
/* The creature life bar's painted rim falls back to a dark edge, not the label's text colour, if the picture is missing. */
.world-label.monster .plate-hp {
  box-sizing: border-box;
  width: 76px;
  height: 11px;
  border-style: solid;
  border-width: 3px 7px;
  border-image: url(art/ui/enemy-hpbar.png) 21 45 20 45 / 3px 7px stretch;
  background: #a03531 padding-box;
  box-shadow: 0 1px 2px #0006;
  border-color: #2a1a10;
}
.look-part .look-thumb[hidden] {
  display: none;
}

/* Prayer books */
html body #iface-tabs {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
html body #iface-body[data-tab="prayer"] #iface-content {
  gap: 10px;
}
html body #iface-body[data-tab="prayer"] #iface-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
html body #iface-body[data-tab="prayer"] #iface-head h2 > :is(svg, .ui-art) {
  width: 24px;
  height: 24px;
}
html body :is(.prayer-book, .prayer-book-head, .prayer-site) {
  min-width: 0;
  color: var(--ui-text);
  font: 400 12px / 1.45 var(--ui-font);
}
html body .prayer-book {
  min-height: 0;
  flex: 1 1 0;
  padding-right: 3px;
  overflow-x: hidden;
}
html body :is(.prayer-book, .prayer-site) :is(p, small, strong, h3) {
  white-space: normal;
  overflow-wrap: anywhere;
}
html body :is(.prayer-book, .prayer-site) p {
  margin: 0 0 10px;
}
html body :is(.prayer-book, .prayer-book-head) small {
  display: block;
  color: var(--ui-muted);
  font: 400 11px / 1.4 var(--ui-font);
}
/* One header row: book art and name, the points pill, Preparedness while it lasts, the swap as a small icon right. */
html body .prayer-book-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-line);
}
html body .prayer-book-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
html body .prayer-book-name strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .prayer-book-name > .ui-art {
  flex: none;
  width: 26px;
  height: 26px;
}
html body .prayer-book-head > .icon-btn {
  flex: none;
  min-height: 0;
  width: 28px;
  height: 28px;
}
html body .prayer-list {
  display: grid;
  gap: 8px;
}
/* RS3's prayer grid (game/features/prayer.js): icons only, five across; everything else is the hover tip. Locked
   prayers dimmed and grey, an active one ringed in the accent, a use prayer's cooldown seconds in the corner; with
   no points the whole grid dims. */
html body .prayer-book .prayer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 50px;
  gap: 3px;
  margin: 8px 0 0;
}
html body .prayer-grid.dry {
  opacity: 0.55;
}
html body .prayer-book .prayer-cell {
  min-height: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  padding: 0;
}
html body .prayer-book .prayer-cell .combat-art,
html body .prayer-book .prayer-cell > svg {
  grid-row: 1;
  width: 32px;
  height: 32px;
}
html body .prayer-book .prayer-cell > b {
  position: absolute;
  right: 3px;
  top: 2px;
  font-size: 11px;
}
html body .prayer-book .prayer-cell.on {
  border-color: var(--ui-accent);
  background: var(--ui-cell-raised);
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}
html body .prayer-book .prayer-cell.locked > :not(b) {
  opacity: 0.45;
  filter: grayscale(1);
}
html body .prayer-book .prayer-cell:disabled:not(.locked) > :not(b) {
  opacity: 0.6;
}
html body :is(.prayer-book, .prayer-book-head, .prayer-site, .prayer-entrust) button,
html body #action-bar .prayer-tray > button {
  min-height: 44px;
  white-space: normal;
  line-height: 1.35;
  touch-action: manipulation;
}
html body :is(.prayer-book, .prayer-book-head, .prayer-site) button:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}
html body .prayer-entry {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  color: var(--ui-text);
  text-align: left;
}
html body button.prayer-entry.on {
  border-color: var(--ui-accent);
  box-shadow: inset 3px 0 var(--ui-accent);
  background: var(--ui-cell-raised);
}
html body .prayer-entry:disabled {
  opacity: 0.58;
}
html body .prayer-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
html body .prayer-row-head > :is(.combat-art, svg) {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
}
html body .prayer-row-head > span {
  flex: 1;
  min-width: 0;
}
html body .prayer-state {
  color: var(--ui-accent);
  font: 600 11px / 1.2 var(--ui-font);
}
html body .prayer-effect {
  display: block;
  font-weight: 400;
}
html body .prayer-use p {
  margin: 0;
}
html body .prayer-use-targets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
html body .prayer-use-targets button {
  width: 100%;
}
/* The book chooser: two cards side by side, art, name and one button each; the words are the hover tip. */
html body .prayer-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
html body .prayer-book-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  text-align: center;
}
html body .prayer-book-choice.on {
  border-color: var(--ui-accent);
}
html body .prayer-book-choice > .ui-art {
  width: 48px;
  height: 48px;
}
html body .prayer-book-choice h3 {
  margin: 0;
}
html body .prayer-book-choice > button {
  width: 100%;
}
html body .prayer-chooser > button {
  width: 100%;
}
html body .prayer-site-points {
  display: flex;
  align-items: center;
  gap: 8px;
}
html body .prayer-site-points .ui-art {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}
html body .prayer-prepared .ui-art {
  width: 14px;
  height: 14px;
}
html body .prayer-foot {
  margin-top: 12px;
  color: var(--ui-muted);
  font-size: 11px;
}
html body .prayer-site {
  display: grid;
  gap: 8px;
}
html body .prayer-site button {
  width: 100%;
}
html body .prayer-entrust {
  flex-wrap: wrap;
}
html body .prayer-entrust .row-acts {
  flex: 1 0 100%;
}
html body .prayer-entrust .row-acts button {
  width: 100%;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  /* More opens above the dock; its parent reserves the full menu for message/nameplate placement. On short
     screens the lift shrinks so Quests stays below the top edge. */
  html body #interface.more {
    min-width: 212px;
    min-height: min(584px, calc(100dvh - var(--hud-m) - var(--safe-bottom) - max(8px, env(safe-area-inset-top))));
    justify-content: flex-end;
  }
  html body #iface-tabs {
    --more-lift: clamp(0px, calc((100dvh - var(--hud-m) - var(--safe-bottom) - max(8px, env(safe-area-inset-top))) / var(--ui-scale, 1) - 244px), 340px);
    grid-template-columns: 44px;
    background: none;
    border: 0;
    box-shadow: none;
  }
  html body #iface-tabs button.active {
    background: var(--ui-cell);
    border-color: var(--ui-accent);
    box-shadow: inset 0 0 0 1px var(--ui-accent);
  }
  html body #iface-tabs button[data-iface="prayer"] {
    display: none;
    position: absolute;
    right: 52px;
    width: min(160px, calc(100vw - 76px));
    height: 44px;
    padding: 0 10px;
    border-radius: var(--ui-radius);
    justify-content: flex-start;
    gap: 10px;
  }
  html body #interface.more #iface-tabs button[data-iface="prayer"] {
    display: flex;
  }
  html body #interface.more #iface-tabs [data-iface="prayer"] .iface-tab-label {
    display: block;
    font: 600 12px / 1.3 var(--ui-font);
  }
  html body #iface-tabs button[data-iface="quests"] { bottom: calc(var(--more-lift) + 200px); }
  html body #iface-tabs button[data-iface="echoes"] { bottom: calc(var(--more-lift) + 150px); }
  html body #iface-tabs button[data-iface="prayer"] { bottom: calc(var(--more-lift) + 100px); }
  html body #iface-tabs button[data-iface="commons"] { bottom: calc(var(--more-lift) + 50px); }
  html body #iface-tabs button[data-iface="log"] { bottom: var(--more-lift); }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  /* The bar starts right of the chat button's corner, so the button stays while skilling; a fight hides it. */
  body.fighting #chat-button {
    display: none;
  }
  html body #iface-tabs {
    grid-template-columns: repeat(4, minmax(44px, 1fr));
  }
  html body #iface-body {
    max-height: calc(100dvh - 140px);
  }
}

/* Meadow Ring */
html body #duel-hud .ring-fighters { display: grid; gap: 8px; margin-top: 8px; text-align: left; }
html body #duel-hud .ring-fighter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; font-size: 12px; }
html body #duel-hud .ring-fighter > span { min-width: 0; overflow-wrap: anywhere; }
html body #duel-hud .ring-fighter small { display: block; font-size: 10px; letter-spacing: 0; color: var(--ui-muted, #abb6a0); }
html body #duel-hud .ring-fighter > b { font-variant-numeric: tabular-nums; font-weight: 600; }
html body .ring-fighter meter { grid-column: 1 / -1; width: 100%; height: 8px; border: 0; border-radius: 4px; overflow: hidden; background: var(--ui-line, #3c5042); }
html body .ring-fighter meter::-webkit-meter-bar { border: 0; border-radius: 4px; background: var(--ui-line, #3c5042); }
html body .ring-fighter meter::-webkit-meter-optimum-value { background: var(--ui-accent, #b4c58a); }
html body .ring-fighter meter::-moz-meter-bar { background: var(--ui-accent, #b4c58a); }
html body #duel-hud .ring-note { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--ui-muted, #abb6a0); text-align: left; }
html body .ring-panel { display: grid; gap: 10px; }
html body .ring-panel > .ring-fighter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
html body .ring-panel .ring-fighter small { display: block; font-size: 11px; color: var(--ui-muted, #abb6a0); }
html body .ring-panel .ring-rules { margin: 0; line-height: 1.6; }
html body .ring-panel > button { width: 100%; min-height: 44px; }
html body .ring-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html body .ring-actions > button { flex: 1; min-height: 44px; }
html body #context .ring-context { display: grid; gap: 8px; max-width: 320px; text-align: left; }
html body #context .ring-context p { margin: 0; font-size: 12px; line-height: 1.5; }
html body #context .ring-context > button { min-height: 44px; }

/* The crafting goal tracker (features/goals.js): the quest card's slate and fold pattern in the message rail. */
#goal-tracker {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--ui-trim);
  border-radius: var(--ui-radius-win);
  background: var(--ui-win);
  box-shadow: var(--ui-frame);
  color: var(--ui-text);
  font-family: var(--ui-font);
}
#goal-tracker button {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-radius: var(--ui-radius);
  background: transparent;
  color: inherit;
  text-align: left;
}
#goal-tracker .goal-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 2px 0;
}
#goal-tracker .goal-title {
  flex: 1;
  min-width: 0;
}
#goal-tracker .goal-title b,
#goal-tracker .goal-item-name,
#goal-tracker .goal-source,
#goal-tracker .goal-storage {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#goal-tracker .goal-title b {
  color: var(--ui-title);
  font: 600 13px / 1.4 var(--ui-font);
}
#goal-tracker :is(.goal-title, .goal-next) small {
  display: block;
  color: var(--ui-muted);
  font: 500 10px / 1.4 var(--ui-font);
}
#goal-tracker :is(.goal-toggle, .goal-next) > svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--ui-muted);
}
#goal-tracker .goal-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 40px;
  padding: 6px;
  margin: 4px 0;
  border: 1px solid var(--ui-slot-line);
  background: var(--ui-cell);
  color: var(--ui-accent);
}
#goal-tracker .goal-next > span {
  min-width: 0;
}
#goal-tracker .goal-next b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 600 12px / 1.4 var(--ui-font);
}
#goal-tracker .goal-storage {
  margin: 6px 0 2px;
  color: var(--ui-muted);
  font: 400 10px / 1.3 var(--ui-font);
}
#goal-tracker ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#goal-tracker .goal-tree {
  max-height: min(260px, 32dvh);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  touch-action: pan-y;
}
#goal-tracker .goal-tree ul {
  margin-left: 3px;
  padding-left: 6px;
  border-left: 1px solid var(--ui-line);
}
#goal-tracker .goal-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 4px;
  min-height: 32px;
  padding: 5px 2px;
  font: 500 11px / 1.4 var(--ui-font);
}
#goal-tracker .goal-count {
  flex: none;
  white-space: nowrap;
  font: 600 10px / 1.5 var(--ui-font);
  font-variant-numeric: tabular-nums;
}
#goal-tracker .goal-tick {
  display: inline-block;
  width: 12px;
}
#goal-tracker .covered .goal-count {
  color: var(--ui-good);
}
#goal-tracker .goal-source {
  grid-column: 1 / -1;
  color: var(--ui-muted);
  font: 400 10px / 1.4 var(--ui-font);
}
@media (hover: hover) {
  #goal-tracker button:hover {
    background: var(--ui-cell-hover);
  }
}
@media (pointer: coarse) {
  #goal-tracker :is(.goal-toggle, .goal-next, .goal-item) {
    min-height: 44px;
  }
  #goal-tracker .goal-tree ul {
    margin-left: 1px;
    padding-left: 4px;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  /* A compact tutorial no longer fills the whole tracker column when a goal follows it. */
  #message-rail #trackers:has(#quest.compact:not([hidden])):has(#goal-tracker:not([hidden])) {
    max-height: 100%;
    flex: 0 1 auto;
  }
  #message-rail.has-messages #trackers:has(#quest.compact:not([hidden])):has(#goal-tracker:not([hidden])) {
    max-height: 55%;
    flex-shrink: 0;
  }
}
/* Compact minimised map: the world-map and Settings orbs keep their painted picture its own size (the flex row
   squeezed it to zero width). */
html body.hud-map-min #map-cluster > :is(#orb-map, #settings) > .art-icon {
  flex: none;
  width: 30px;
  height: 30px;
}

/* Hot recipes (rules HOT_RECIPE): a gold star on the lit recipe's cell and a line in its detail. */
.pack-cell.hot {
  box-shadow: inset 0 0 0 2px rgba(255, 200, 70, 0.75), 0 0 8px rgba(255, 190, 60, 0.45);
}
.hot-star {
  position: absolute;
  top: 1px;
  left: 3px;
  color: #ffcf5a;
  font-size: 11px;
  line-height: 1;
  text-shadow: 0 0 4px rgba(255, 180, 40, 0.8);
  pointer-events: none;
}
.hot-star.inline {
  position: static;
}
.hot-line {
  margin: 6px 0;
  font-size: 12px;
  color: var(--ui-muted);
}
.hot-line.on {
  color: #ffcf5a;
  font-weight: 700;
}

/* Fishing and foraging's hotspot word on the life bar (game/ui/actionbar.js hotLabel). */
.lp-buff.lp-hot-label {
  width: auto;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--ui-muted);
}
/* It sits just above the life bar's right end, so it never covers the life numbers. */
#action-bar .lp .lp-buff.lp-hot-label {
  position: absolute;
  right: 0;
  bottom: calc(100% + 3px);
  border-radius: 5px;
  background: rgba(18, 22, 18, 0.88);
}
.lp-buff.lp-hot-label.on {
  color: #ffcf5a;
  text-shadow: 0 0 4px rgba(255, 180, 40, 0.7);
}
/* Forge pips on the quench slot (skill-ideas #9): three small rings down the right edge, filled for each true-struck bar. */
.bar-slot .forge-pips {
  position: absolute;
  right: 3px;
  top: 15px;
  display: grid;
  gap: 2px;
  pointer-events: none;
}
.bar-slot .forge-pips i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid #ffd27a;
  box-sizing: border-box;
}
.bar-slot .forge-pips i.on {
  background: #ffd27a;
  box-shadow: 0 0 4px rgba(255, 190, 80, 0.8);
}
.bar-slot[data-bar-quench] .bar-word {
  left: 0;
  right: 0;
  font-size: 8px;
  letter-spacing: -0.3px;
}
/* The station work bar (skill ideas 2 S1–S4, features/stations.js): cooking, fletching, weaving and smithing on the
   skilling layout. Context slots reuse .skill-ctx; the cook's route lights gold on Save; ← → show only during the
   return pass and light once its first window opens; forge pips ride the bar's progress strip. */
#action-bar .station-slots {
  display: flex;
  gap: 6px;
  min-width: 0;
}
#action-bar .station-slot {
  flex: 1 1 0;
  min-width: 0;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--ui-trim);
  border-radius: 4px;
  background: var(--ui-cell);
  color: var(--ui-text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
#action-bar .station-slot[hidden] {
  display: none;
}
#action-bar .station-slot > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#action-bar .station-slot.on {
  border-color: #ffd27a;
  color: #ffe39a;
}
#action-bar .station-pass > svg {
  flex: none;
  width: 14px;
  height: 14px;
}
#action-bar .station-pass > svg.flip {
  transform: scaleX(-1);
}
#action-bar .station-pass.on {
  border-color: #ffd27a;
  background: var(--ui-cell-on, var(--ui-cell));
  box-shadow: 0 0 0 1px #ffd27a, 0 0 8px rgba(255, 210, 122, 0.45);
  color: #ffe39a;
}
#action-bar .station-work .skill-head .forge-pips {
  position: static;
  flex: none;
  display: flex;
  align-self: center;
  gap: 3px;
  pointer-events: none;
}
#action-bar .station-work .skill-head .forge-pips i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid #ffd27a;
  box-sizing: border-box;
}
#action-bar .station-work .skill-head .forge-pips i.on {
  background: #ffd27a;
  box-shadow: 0 0 4px rgba(255, 190, 80, 0.8);
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body #action-bar .station-slots {
    grid-column: 1 / -1;
  }
  html body #action-bar .station-slot {
    min-height: 40px;
  }
}
/* Focus zones (Ali, 2026-10-12; ui/zonetrack.js). The work's own progress bar is the timing track: a dark wood rail
   with a brass fill whose leading edge (a thin cream needle) is the marker. A zone is two greens set into the rail
   ahead of the fill: the wide light band and, in its middle, the narrow dark one. A press answers with a calm change
   of colour and one short word at the rail's end; nothing pulses, nothing rings. The track spans the bar's width. */
#action-bar .zone-track {
  --zt-h: 20px;
  position: relative;
  grid-column: 1 / -1;
  height: var(--zt-h);
  border-radius: 4px;
  background: linear-gradient(#17140f, #221d16);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(122, 92, 51, 0.6);
  isolation: isolate;
}
#action-bar .zone-track > .zt-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  border-radius: inherit;
  background: linear-gradient(#b8824a, #7c5028);
  will-change: transform;
}
#action-bar .zone-track > .zt-zone {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  transition: background-color 0.25s ease, opacity 0.6s ease;
}
#action-bar .zone-track > .zt-light {
  background-color: rgba(172, 211, 139, 0.96);
  box-shadow: inset 0 0 0 1px #e2f4ce;
}
#action-bar .zone-track > .zt-dark {
  background-color: rgba(46, 104, 56, 0.92);
  box-shadow: inset 1px 0 0 rgba(200, 232, 176, 0.45), inset -1px 0 0 rgba(200, 232, 176, 0.45);
}
#action-bar .zone-track > .zt-dark::after {
  content: '';
  position: absolute;
  left: calc(50% - 1px);
  top: 3px;
  bottom: 3px;
  width: 2px;
  background: #e2f4ce;
}
#action-bar .zone-track.zone-open > .zt-zone {
  filter: brightness(1.18);
}
#action-bar .zone-track.zone-open > .zt-edge::before {
  background: #fff;
  box-shadow: 0 0 0 1px #172119, 0 0 5px rgba(255, 255, 255, 0.7);
}
#action-bar .zone-track.zone-cue > .zt-word {
  opacity: 1;
  transition: none;
}
#action-bar .zone-track > .zt-edge {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform: translateX(0);
  pointer-events: none;
  will-change: transform;
}
#action-bar .zone-track > .zt-edge::before {
  content: '';
  position: absolute;
  left: -1.5px;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 1px;
  background: #f6ead0;
  box-shadow: 0 0 0 1px rgba(28, 18, 8, 0.6);
}
#action-bar .zone-track > .zt-label,
#action-bar .zone-track > .zt-word {
  position: absolute;
  top: 0;
  z-index: 3;
  line-height: var(--zt-h);
  font-size: 11px;
  font-weight: 600;
  color: #f4ead2;
  text-shadow: 0 1px 2px #000, 0 0 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  pointer-events: none;
}
#action-bar .zone-track > .zt-label {
  left: 7px;
}
#action-bar .zone-track > .zt-word {
  right: 7px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* A caught dark band settles to gold; a caught light band to pale gold; a spent or passed zone to grey; then it fades. */
#action-bar .zone-track.zone-dark > .zt-dark,
#action-bar .zone-track.zone-light > .zt-light {
  background-color: rgba(250, 232, 178, 0.9);
  box-shadow: inset 0 0 0 1px rgba(120, 84, 30, 0.55);
}
#action-bar .zone-track.zone-dark > .zt-light {
  background-color: rgba(250, 232, 178, 0.35);
}
#action-bar .zone-track.zone-light > .zt-dark {
  background-color: rgba(250, 232, 178, 0.6);
}
#action-bar .zone-track.zone-miss > .zt-zone {
  background-color: rgba(150, 144, 130, 0.3);
  box-shadow: none;
}
#action-bar .zone-track.zone-gone > .zt-zone {
  opacity: 0;
}
#action-bar .zone-track:is(.res-dark, .res-light, .res-miss, .res-pending) > .zt-word {
  opacity: 1;
}
#action-bar .zone-track.res-dark > .zt-word {
  color: #ffe39a;
}
#action-bar .zone-track.res-light > .zt-word {
  color: #e3f0d2;
}
#action-bar .zone-track.res-miss > .zt-word {
  color: #c8c1b1;
}
/* On a work bar the result word sits in the head row above the track, at its right, over the bar's own ground: never on
   the zone it answers, the needle or the fill (the head's own note is back when the word fades). */
#action-bar .skill-work .zone-track > .zt-word {
  top: auto;
  bottom: calc(100% + 6px);
  right: 0;
  padding-left: 16px;
  line-height: 14px;
  background: linear-gradient(90deg, rgba(23, 33, 29, 0), var(--ui-win-solid) 14px);
  text-shadow: none;
}
#action-bar .skill-work:has(> .skill-meters > .zone-track:is(.zone-cue, .res-dark, .res-light, .res-miss, .res-pending), > .zone-track:is(.zone-cue, .res-dark, .res-light, .res-miss, .res-pending)) > .skill-head > :not(strong) {
  visibility: hidden;
}
/* The return pass's side, shown over its zone until a moment before it (then remembered). */
#action-bar .zone-track > .zt-pass {
  position: absolute;
  top: 0;
  z-index: 3;
  transform: translateX(-50%);
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  line-height: var(--zt-h);
  color: #f6ead0;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
#action-bar .zone-track.fire-burn > .fire-half {
  z-index: 2;
}
/* Focused: one calm word in the bar's head while the piece under way runs Focused (or Afterglow at this node). */
#action-bar .skill-focused {
  flex: none;
  color: var(--ui-title);
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
}
#action-bar .skill-focused[hidden] {
  display: none;
}
/* The large button: quiet while there is nothing to press, gold-trimmed while a zone can be pressed. Never pulsing. */
html body #action-bar .skill-tap.idle {
  opacity: 0.8;
}
html body #action-bar .skill-tap.ready {
  border-color: #d9b978;
  box-shadow: inset 0 0 0 1px rgba(217, 185, 120, 0.45);
  color: #f1d99b;
}
/* Combat keeps the work track's height; its mode icon survives result words. */
#action-bar .fight-strips > .zone-track.fight-strip {
  --zt-h: 22px;
  height: var(--zt-h);
  border-radius: 4px;
}
#action-bar .fight-strips > .zone-track.fight-strip > :is(.zt-label, .zt-word) {
  font-size: 11px;
  letter-spacing: 0.02em;
}
/* The strip's result word takes the label's place at its start, on a small dark plate, clear of the band at its end. */
#action-bar .fight-strips > .zone-track.fight-strip > .zt-word {
  top: 2px;
  left: 25px;
  right: auto;
  padding: 0 6px;
  border-radius: 3px;
  line-height: calc(var(--zt-h) - 4px);
  background: rgba(20, 15, 10, 0.86);
  text-shadow: none;
}
#action-bar .fight-strips > .zone-track.fight-strip:is(.res-dark, .res-light, .res-miss, .res-pending) > .zt-label {
  opacity: 0;
}
#action-bar .fight-strip { --zt-mode: #e1b76e; }
#action-bar .fight-strip.mode-block { --zt-mode: #9cd9ef; }
#action-bar .fight-strip.mode-step { --zt-mode: #ffc290; }
#action-bar .fight-strip.mode-block > .zt-fill { background: linear-gradient(#426b80, #294656); }
#action-bar .fight-strip.mode-step > .zt-fill { background: linear-gradient(#9a623c, #623d27); }
#action-bar .fight-strip > .zt-mode {
  position: absolute;
  z-index: 4;
  inset: 0 auto 0 0;
  width: 24px;
  display: grid;
  place-items: center;
  color: var(--zt-mode);
  background: #171c18;
  border-radius: 4px 0 0 4px;
  pointer-events: none;
}
#action-bar .fight-strip > .zt-mode > span { display: none; }
#action-bar .fight-strip.mode-attack .zt-attack-icon,
#action-bar .fight-strip.mode-block .zt-block-icon,
#action-bar .fight-strip.mode-step .zt-step-icon { display: flex; }
#action-bar .fight-strip > .zt-mode svg { width: 16px; height: 16px; }
#action-bar .fight-strips > .fight-strip > .zt-label { left: 29px; color: var(--zt-mode); }
#action-bar .fight-strip > .zt-ghost {
  position: absolute;
  z-index: 2;
  top: 1px;
  bottom: 1px;
  border: 1px dashed rgba(225, 183, 110, 0.55);
  box-sizing: border-box;
  pointer-events: none;
}
#action-bar .fight-head .fight-focused {
  margin-left: auto;
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body #action-bar .zone-track {
    --zt-h: 24px;
  }
  html body #action-bar .fight-strips > .zone-track.fight-strip {
    --zt-h: 24px;
  }
}
html body.reduced #action-bar .zone-track > :is(.zt-zone, .zt-word) {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  html body:not(.motion-ok) #action-bar .zone-track > :is(.zt-zone, .zt-word) {
    transition: none;
  }
}
/* Desktop: the track takes the bar's whole width (a longer track is a fairer timing), the small slots and the large
   button share the row under it. */
@media (min-width: 701px) and (min-height: 501px) {
  html body #action-bar .skill-work > .skill-meters {
    display: contents;
  }
  html body #action-bar .skill-work > .skill-meters > .zone-track {
    --zt-h: 22px;
    grid-column: 1 / -1;
  }
  html body #action-bar .skill-work > .skill-meters > :is(.skill-ctxs, .station-slots, .hearth-slots) {
    grid-column: 1;
    align-self: center;
  }
  html body #action-bar .skill-work > .skill-tap {
    grid-column: 2;
    height: 58px;
    min-height: 58px;
  }
}
/* The half-burn mark belongs to the whole burn; while the track shows only the coal turn's stretch it steps aside. */
#action-bar .zone-track.fire-burn.near > .fire-half {
  display: none;
}
/* Phone: the same shape, docked at the bottom: the track across, the small slots on the left, the large button on the
   right under the thumb. */
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  /* The large button gives way on a narrow bar (a small phone at Interface 130%): Stop keeps at least 66 px. */
  html body #action-bar .skill-work {
    grid-template-columns: minmax(0, 1fr) min(132px, calc(100% - 72px));
  }
  html body #action-bar .skill-work > .skill-meters {
    display: contents;
  }
  html body #action-bar .skill-work > .skill-meters > .zone-track {
    grid-column: 1 / -1;
  }
  html body #action-bar .skill-work > .skill-meters > :is(.skill-ctxs, .station-slots, .hearth-slots) {
    grid-column: 1;
    grid-auto-flow: row;
    align-self: center;
  }
  html body #action-bar .skill-work > .skill-meters > .skill-ctxs:not(.specimens) {
    flex-direction: column;
  }
  html body #action-bar .skill-work > .skill-tap {
    grid-column: 2;
    justify-self: stretch;
    width: auto;
    margin: 0;
  }
}
/* Focus help (ui/zonetrack.js focusHelp) while a player is learning. The bar fits itself (ui/actionbar.js fitBar):
   compact shows the one-line form and a lower Space button; tight and bare drop the help. The one line's gain wraps out of
   sight rather than truncating when it does not fit. */
#action-bar .skill-focus-help {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ui-text);
}
#action-bar .skill-focus-help p {
  margin: 0;
}
#action-bar .skill-focus-help span {
  color: var(--ui-muted);
}
#action-bar .skill-focus-help .sfh-line {
  display: none;
  flex-wrap: wrap;
  column-gap: 5px;
  height: 16px;
  overflow: hidden;
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}
#action-bar .skill-focus-help .sfh-do {
  color: var(--ui-text);
}
html body #action-bar[data-fit] .skill-focus-help .sfh-full {
  display: none;
}
html body #action-bar[data-fit] .skill-focus-help .sfh-line {
  display: flex;
}
html body #action-bar:is([data-fit="tight"], [data-fit="bare"]) .skill-focus-help {
  display: none;
}
html body #action-bar[data-fit].skilling {
  padding-top: 4px;
  padding-bottom: 6px;
  gap: 4px;
}
html body #action-bar[data-fit] .skill-work {
  grid-template-columns: minmax(0, 1fr) minmax(84px, 40%);
  gap: 4px 6px;
}
html body #action-bar[data-fit] .skill-work :is(.skill-ctx:not(.specimen), .station-slot) {
  min-height: 34px;
}
html body #action-bar[data-fit] .skill-work > .skill-tap {
  height: 54px;
  min-height: 54px;
  grid-template-rows: 24px 14px;
  padding: 4px 6px;
}
/* Up to snug a long aside takes the head's second line ("Cupping · Birch tree" over "+1 glimmer · Afterglow in the dark
   green"), so the work's name is never cut before flat. */
html body #action-bar .skill-head {
  flex-wrap: wrap;
  column-gap: 8px;
}
/* Snug and after: two stacked context buttons (Use rod over Stop) share the Space button's height. Flat and later also
   keep the head to one line: the work's name gives way only after the help could not have its room otherwise. */
html body #action-bar:is([data-fit="snug"], [data-fit="flat"], [data-fit="lean"], [data-fit="tight"], [data-fit="bare"]) .skill-work > .skill-meters > .skill-ctxs:not(.specimens) {
  align-self: stretch;
  gap: 4px;
}
html body #action-bar:is([data-fit="snug"], [data-fit="flat"], [data-fit="lean"], [data-fit="tight"], [data-fit="bare"]) .skill-work .skill-ctx:not(.specimen) {
  min-height: 25px;
}
html body #action-bar:is([data-fit="flat"], [data-fit="lean"], [data-fit="tight"], [data-fit="bare"]) .skill-head {
  flex-wrap: nowrap;
}
/* On one line the work's name keeps its room: an aside ("10 bones left · 0 caught", "★ 25% faster") gives way first. */
html body #action-bar:is([data-fit="flat"], [data-fit="lean"], [data-fit="tight"], [data-fit="bare"]) .skill-head > strong {
  flex: 0 1 auto;
}
html body #action-bar:is([data-fit="flat"], [data-fit="lean"], [data-fit="tight"], [data-fit="bare"]) .skill-head > :not(strong) {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The hearth bars (fire, bowl, cup) in a fitted bar: their one or two small slots stack in the left column and share the
   Space button's height, so each keeps its word ("Leave for cooks", "Light") rather than an ellipsis. A slot's word
   too long for its column takes a second line (in every layout). */
html body #action-bar[data-fit] .skill-work > .skill-meters > .hearth-slots {
  grid-column: 1;
  grid-auto-flow: row;
  grid-auto-rows: minmax(0, 1fr);
  align-self: stretch;
  gap: 4px;
}
html body #action-bar[data-fit] .skill-work > .skill-meters > .hearth-slots:has(> .hearth-slot:only-child) {
  align-self: center;
}
html body #action-bar[data-fit] .hearth-slot {
  height: auto;
  min-height: 25px;
  border-radius: var(--ui-radius);
}
html body #action-bar[data-fit] .hearth-slot:only-child {
  min-height: 34px;
}
#action-bar .hearth-slot .bar-word {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  line-height: 11px;
  text-align: center;
}
/* A slot column too narrow for an icon and a two-line word (a small phone at Interface 130%) keeps the word. */
#action-bar .hearth-slots {
  container-type: inline-size;
}
@container (max-width: 100px) {
  html body #action-bar .hearth-slot.worded :is(.item-thumb, svg) {
    display: none;
  }
}
/* The watched fire's fixed line ("Taking coal puts the fire out.", inline-styled in features/firemaking.js): one smaller
   line in a fitted bar, and out of sight from lean on, so the Focus help keeps its room while a player is learning. */
html body #action-bar[data-fit] .hearth-watch > div:not([class]) {
  font-size: 11px !important;
  line-height: 15px !important;
}
html body #action-bar:is([data-fit="lean"], [data-fit="tight"], [data-fit="bare"]) .hearth-watch > div:not([class]) {
  display: none;
}
/* The last resort: the life and prayer row steps aside so the work itself still fits under the other controls. */
html body #action-bar[data-fit="bare"].skilling > .vitals {
  display: none;
}
/* While skilling, a rail card or message the rail would cut stays out of sight until it fits (ui/actionbar.js railFit). */
html body #message-rail [data-rail-cut] {
  visibility: hidden;
}
/* The minimap's zoom (features/map.js places it inside the map's bottom edge). */
html body #minimap-zoom {
  position: absolute;
  z-index: var(--z-hud, 4);
  display: flex;
  gap: 2px;
  transform: translate(-50%, -100%);
  pointer-events: auto;
}
html body #minimap-zoom[hidden],
html body.hud-map-min #minimap-zoom {
  display: none;
}
html body #minimap-zoom button {
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ui-trim-hi);
  background: var(--ui-win);
  color: var(--ui-text);
  cursor: pointer;
}
html body #minimap-zoom button:hover,
html body #minimap-zoom button:focus-visible {
  border-color: var(--ui-select);
  color: var(--ui-select);
}
html body #minimap-zoom svg {
  width: 13px;
  height: 13px;
}
html body #minimap {
  touch-action: none;
}
/* Dash (game/features/dash.js, 2026-10-14): the fight row's slot beside Block, and out of a fight the bar's first slot.
   Its cooldown is a clock sweep under the seconds left; the word and key stay readable over it. Lit like Block while a
   blow that goes through a guard is coming. */
@property --abcd { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes ab-cd { from { --abcd: 1; } to { --abcd: 0; } }
@keyframes ab-ready { 0% { box-shadow: 0 0 0 0 #ffd77acc; } 100% { box-shadow: 0 0 0 9px #ffd77a00; } }
#action-bar .fight-fourth .ab-cd {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(rgba(0, 0, 0, 0.62) calc(var(--abcd) * 360deg), transparent 0);
  animation: ab-cd linear forwards;
  pointer-events: none;
}
/* Off cooldown with the adrenaline it needs: one ring of light, as RS3 flashes an ability coming ready. */
#action-bar .fight-fourth.ab-ready { animation: ab-ready .7s ease-out 1; }
#action-bar :is(.fight-dash, .idle-dash) .dash-cd {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(rgba(0, 0, 0, 0.62) calc(var(--cd, 0) * 360deg), transparent 0);
  pointer-events: none;
}
#action-bar :is(.fight-dash, .idle-dash) .cool {
  background: none;
  color: #fff;
  font: 800 16px/1 system-ui, sans-serif;
  text-shadow: 0 0 3px #000, 1px 1px 0 #000;
  pointer-events: none;
}
#action-bar :is(.fight-dash, .idle-dash) .cool[hidden] {
  display: none;
}
#action-bar :is(.fight-dash, .idle-dash) :is(.bar-word, kbd) {
  z-index: 1;
  opacity: 1;
}
html body #action-bar .bar-slots.fight-row {
  grid-template-columns: 48px 76px 48px 48px 48px;
}
#action-bar .fight-call.step {
  white-space: normal;
}
#action-bar .fight-dash.warn {
  border-color: #e9b949;
  box-shadow: 0 0 0 2px rgba(233, 185, 73, 0.45);
}
@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html body #action-bar .bar-slots.fight-row {
    grid-template-columns: minmax(44px, 1fr) minmax(64px, 1.5fr) minmax(44px, 1fr) minmax(44px, 1fr) minmax(44px, 1fr);
  }
}
/* The clue scroll open in the middle of the screen (items.js clueCard) until Close: the parchment at its own shape, the
   text inside its clear middle (clear of the wax seal top right and the map marks in the corners). */
#clue-card {
  position: fixed;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: var(--z-prompt);
  width: min(440px, calc(100vw - 24px));
  aspect-ratio: 4 / 3;
  padding: 17% 13% 11% 12%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: url(art/trails/clue-card.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
  color: #3a2814;
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: auto;
}
#clue-card .clue-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
#clue-card .clue-card-mark {
  width: 34px;
  height: 34px;
  opacity: 0.85;
}
#clue-card .clue-card-line {
  margin: 0;
  font-size: 16px;
  font-style: italic;
  line-height: 1.35;
}
#clue-card .clue-card-where {
  margin: 0;
  padding: 4px 12px;
  border-top: 1px solid rgba(90, 60, 25, 0.35);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #5a3a14;
}
#clue-card .clue-card-where.here {
  color: #2f6a2a;
  font-size: 17px;
}
#clue-card .clue-card-where:empty {
  display: none;
}
#clue-card .clue-card-close {
  align-self: center;
  padding: 3px 16px;
  border: 1px solid rgba(90, 60, 25, 0.55);
  border-radius: 999px;
  background: rgba(255, 246, 220, 0.55);
  color: #3a2814;
  font: 600 13px Georgia, serif;
  cursor: pointer;
}
#clue-card .clue-card-close:hover {
  background: rgba(255, 246, 220, 0.9);
}
/* A map step (clue-card.js): the parchment grows to hold the painted map, aged to the scroll's ink, with the X in red. */
#clue-card .clue-card-map {
  display: none;
  position: relative;
  width: 168px;
  height: 168px;
  border: 2px solid rgba(90, 60, 25, 0.55);
  border-radius: 6px;
  overflow: hidden;
}
#clue-card.map {
  aspect-ratio: 4 / 4.4;
  padding-top: 15%;
}
#clue-card.map .clue-card-map {
  display: block;
}
#clue-card.map .clue-card-step {
  display: none;
}
#clue-card .clue-card-map canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: sepia(0.55) saturate(0.8) contrast(0.92) brightness(1.04);
}
#clue-card .clue-card-x {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #b0201a;
  font: 900 26px Georgia, serif;
  text-shadow: 0 0 3px rgba(255, 240, 210, 0.9);
  pointer-events: none;
}
#clue-card .clue-card-where.coord {
  font-size: 15px;
}
/* Moving and resizing the HUD (game/ui/hudmove.js): a dashed frame over each box while editing, a grip at its corner,
   and the bar with Reset and Done along the top. The frames sit over the boxes, so a press on a box drags it. */
#hud-edit {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-toast, 22) + 1);
  pointer-events: none;
}
#hud-edit .hud-edit-bar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  pointer-events: auto;
  font-size: 14px;
  max-width: calc(100vw - 32px);
}
#hud-edit .hud-frame {
  position: absolute;
  border: 2px dashed var(--gold);
  border-radius: 10px;
  background: rgb(217 185 120 / 0.12);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
#hud-edit .hud-frame:active {
  cursor: grabbing;
}
#hud-edit .hud-frame-name {
  position: absolute;
  top: 4px;
  left: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgb(20 18 14 / 0.8);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
}
#hud-edit .hud-frame-grip {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
  cursor: nwse-resize;
}
#hud-edit .hud-edit-bar button {
  flex: none;
  width: auto;
  min-width: 0;
}

/* Job 1 (batch 1+3): Commons/quests/people density. Append to public/style.css. */
/* Town/Keep project heads: same 36px thumb beside the title. */
.project-head { display: flex; gap: 8px; align-items: center; margin: 2px 0 6px; }
.project-head .project-title { margin: 0; }
.project-pic.thumb { flex: none; width: 36px; height: 36px; aspect-ratio: auto; max-height: none; margin: 0; background-size: cover; }
/* Vote grid: 3 cols (base rule), small art, name only. */
:is(#iface-content, #panel) .vote-grid button { min-height: 0; }
.vote-grid .vote-pic { width: 100%; height: 28px; aspect-ratio: auto; background-size: cover; margin: 0 0 3px; }
/* Built projects: one line each, builders ellipsised (full text on hover). */
.built-line { display: flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 0; }
.built-name { flex: none; font-weight: 600; }
.built-by { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Quests: 3 cols, 32px thumbs; the open quest spans the row and carries the painting. */
html body .quest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body .quest-grid .qj.open { grid-column: 1 / -1; }
.qj-detail-art { display: block; width: 100%; height: 64px; background-size: cover; background-position: center; border-radius: var(--ui-radius); margin: 0 0 6px; }
.qj-needs { margin: 4px 0; }
/* People: a 2-col chip grid (portrait, lamp, name; the rest on hover / in the card). */
.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
html body .people-grid .person-chip { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 6px; cursor: pointer; }
.person-chip .portrait-cell { display: flex; flex: none; }
.person-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Duel: the ring banner is a strip, not a hero. */
.duel-banner { margin-bottom: 6px; }
/* Layout batch 5 (commerce): deposit box scroller, empty exchange slots. */
#panel[data-kind="deposit"] #panel-content > .panel-scroll { margin-bottom: 0; padding-bottom: 4px; }
#panel .ge-empty-btns { flex-direction: row; }
#panel .ge-empty-btns .ge-go { flex: 1 1 0; min-width: 0; }
/* Layout batch 4 (chapel, mosque): the ? help pills. */
.pill[data-prayer-tip] { cursor: help; }

/* B7 (RS3 decisions): the gather-miss cue, the well-fed chip, Settings/Skills toggle rows and the Commons
   bell-fund plaques. Class names are B6's contract; sizes mirror the nearest existing pieces
   (.floating and the miss hitsplat, .lp-buff/.lp-hot-label, the .setting switches, hiscore rows). Desktop only. */
/* A gather miss: like .floating, but dull slate (the miss hitsplat's colours), smaller and gone sooner. */
.miss-floater {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
  font: 600 11px / 1.2 var(--ui-font);
  letter-spacing: 0.4px;
  color: #c3d2d9;
  text-shadow: 0 1px 4px #1c303e;
  animation: miss-float 0.9s ease-out forwards;
}
@keyframes miss-float {
  0% { opacity: 0; translate: 0 0; }
  20% { opacity: 1; }
  100% { opacity: 0; translate: 0 -26px; }
}
/* In the message rail it is a small muted chip in the flow, like the rail's .floating. */
html body #message-rail .miss-floater {
  position: relative;
  inset: auto;
  transform: none;
  translate: none;
  align-self: flex-start;
  padding: 3px 8px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-win);
  color: var(--ui-muted);
  text-shadow: none;
  animation-name: message-fade;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-ok) .miss-floater {
    animation: none;
  }
}
/* The well-fed countdown chip: the hotspot label's chip, with the fed mark and a non-jittering M:SS. */
.buff-fed {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 5px;
  border-radius: 5px;
  background: rgba(18, 22, 18, 0.88);
  color: var(--ui-text);
  font: 700 10px / 1.5 var(--ui-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: auto;
}
.buff-fed[hidden] {
  display: none;
}
.buff-fed .ui-art {
  width: 14px;
  height: 14px;
  flex: none;
}
/* On the life bar it overrides .lp-buff's block, so the mark and the countdown share one line. */
#action-bar .lp .buff-fed {
  display: inline-flex;
}
/* Toggle rows (Focus off, weakest ammo first, the three XP shares): a .setting row that also stands alone
   outside a .setting, switch included. */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ui-line);
  font: 600 12.5px / 1.3 var(--ui-font);
  color: var(--ui-text);
}
button.toggle-row {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  text-align: left;
  cursor: pointer;
}
.toggle-row:is(.on, [aria-pressed="true"]) {
  color: var(--ui-select);
}
.toggle-row label {
  flex: 1 1 auto;
  min-width: 0;
}
.toggle-row label small {
  display: block;
  font: 400 11px / 1.3 var(--ui-font);
  color: var(--ui-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: 10px;
  border: 1px solid var(--ui-line);
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.toggle-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ui-muted);
  transition: transform 0.15s, background 0.15s;
}
.toggle-row input[type="checkbox"]:checked {
  background: var(--ui-cell-on);
  border-color: var(--ui-accent);
}
.toggle-row input[type="checkbox"]:checked::before {
  transform: translateX(16px);
  background: var(--ui-select);
}
@media (forced-colors: active) {
  .toggle-row input[type="checkbox"] {
    border: 1px solid ButtonText;
  }
  .toggle-row input[type="checkbox"]:checked {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}
/* The currency pouch: the backpack foot's coins open one row of currency tiles above it (interface.js pouchHtml). */
.pouch-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.pouch-button:hover,
.pouch-button[aria-expanded='true'] {
  color: var(--ui-accent);
}
.pouch-caret {
  font-style: normal;
  font-size: 10px;
  opacity: 0.7;
}
.pouch {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 4px;
  margin-top: 6px;
}
.pouch-tile {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-radius: var(--ui-radius);
  background: var(--ui-cell);
  border: 1px solid var(--ui-line);
  font: 700 12px / 1.2 var(--ui-font);
  font-variant-numeric: tabular-nums;
  color: var(--ui-text, inherit);
}
.pouch-tile.none {
  opacity: 0.5;
}
.pouch-tile .ui-art {
  width: 18px;
  height: 18px;
  flex: none;
}
/* Quest journal: picture tiles only, the name on hover (Ali, 2026-10-18); an open quest spans the row with its name. */
html body .quest-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; }
html body .quest-grid .qj:not(.open) .qj-row { flex-direction: column; justify-content: center; gap: 2px; padding: 3px; }
html body .quest-grid .qj:not(.open) .qj-card-art.qj-thumb { width: 40px; height: 40px; }
html body .quest-grid .qj:not(.open) .qj-row > .list-bar { width: 40px; }
/* Layout pass (Ali, 2026-10-18): one tile per kind across the game: the picture (and a short number), the name on hover. */
html body .info-grid > .info-grid-cells { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
html body .info-grid .info-grid-cell { min-height: 46px; padding: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; white-space: nowrap; overflow: hidden; }
html body .info-grid-cell > :is(.item-thumb, .art-icon, svg) { width: 32px; height: 32px; }
html body .info-grid-cell > b { font: 700 10px/1.1 var(--ui-font); white-space: nowrap; }
html body .grid-info-card { position: static; max-height: none; overflow: visible; box-shadow: none; }
/* Tab strips: pictures only, the name on hover, always one row (Settings, bank, stalls, kitchens, chapel, log, chat). */
html body #panel-tabs,
html body .seg-tabs { flex-wrap: nowrap; }
html body #panel-tabs button.art-tab { min-width: 40px; padding: 4px 8px; }
html body #panel-tabs button.art-tab .tab-art { width: 24px; height: 24px; margin: 0; vertical-align: middle; }
html body .seg-tabs > button > span { display: none; }
/* The place-name banner: top centre over the world. */
html body #region-card { top: 64px; width: min(420px, calc(100vw - 32px)); }
/* One scroller per window: lists inside the guide and the item card flow with their page. */
html body #panel .wiki-scroll { max-height: none; overflow: visible; padding-right: 0; }
html body #item-info .ii-body.scroll-y { max-height: none; overflow: visible; }
/* Shelves: the price is the cell's corner, not a line beneath it (one tile height everywhere). */
html body .shelf-card .pack-cell { position: relative; }
html body .shelf-card .price-tag { position: absolute; right: 2px; bottom: 1px; font: 700 10px/1 var(--ui-font); color: #f2d37c; text-shadow: 1px 1px 0 #000; font-variant-numeric: tabular-nums; pointer-events: none; }
html body .shelf-card .pack-cell.out .price-tag { color: var(--ui-muted); }
/* Names off the tiles, onto the hover (collection, guide, prayers, fight bar, prayer tray, lodestones, skills). */
html body .item-grid .item .item-name { display: none; }
html body .wiki-tile small { display: none; }
html body .wiki-tile > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html body .pin-slot > span,
html body .pray-slot > span { display: none; }
html body .lode > span:last-child small { display: none; }
html body .lode > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Worn › Toolkit: the pack's tile grid; the tool in use is ringed. */
html body .toolkit { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; margin: 6px 0; }
html body .toolkit .toolkit-tile { aspect-ratio: 1; display: grid; place-items: center; }
html body .toolkit .toolkit-tile > span { display: grid; place-items: center; width: 100%; height: 100%; }
html body .toolkit .toolkit-tile .item-thumb { width: 32px; height: 32px; }
html body .toolkit .toolkit-tile.on { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
html body .toolkit-button { display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-cell); color: var(--ui-muted); cursor: pointer; padding: 2px 8px; }
html body .toolkit-button:hover,
html body .toolkit-button.on { color: var(--ui-accent); border-color: var(--ui-accent); }
html body .toolkit-button .ui-art { width: 16px; height: 16px; }
/* Settings rows: the name and its control; the explanation is the row's hover. */
html body #panel[data-kind="settings"] .setting > label > small { display: none; }
/* The gathering bar's small slots: pictures, the word on hover. */
html body #action-bar .skill-ctx { flex: 0 0 32px; padding: 2px; }
html body #action-bar .skill-ctx > :is(svg, .ui-art, .item-thumb) { width: 18px; height: 18px; }
html body #action-bar .bar-slot.worded:not(.skill-tap):not(.hearth-slot) .bar-word { display: none; }
/* Exchange offers: six small tiles in one row; side and state in the corners, done/total under the item, prices on hover. */
html body .ge-slots { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; }
html body .ge-slot.ge-tile { min-height: 0; padding: 4px; gap: 2px; align-items: center; }
html body .ge-tile .ge-tag { position: absolute; left: 3px; top: 3px; padding: 0 4px; font: 700 10px/1.4 var(--ui-font); border-radius: 3px; }
html body .ge-tile .ge-state { position: absolute; right: 3px; top: 3px; }
html body .ge-tile .ge-state .ge-state-art { width: 14px; height: 14px; margin: 0; }
html body .ge-tile .slot-icon { width: 34px; height: 34px; margin-top: 10px; }
html body .ge-tile .ge-done { font: 600 10px/1.2 var(--ui-font); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
html body .ge-tile .ge-done b { color: var(--ui-text); }
html body .ge-tile .ge-bar { width: 100%; }
html body .ge-tile .ge-slot-foot { display: flex; gap: 3px; justify-content: center; width: 100%; }
html body .ge-tile .ge-slot-foot button { min-height: 24px; padding: 2px 4px; flex: 1 1 0; }
html body .ge-tile .ge-slot-foot button span { display: none; }
html body .ge-tile .ge-slot-foot .ui-art { width: 16px; height: 16px; margin: 0; }
html body .ge-slot.empty.ge-tile { justify-content: center; min-height: 92px; }
html body .ge-tile .ge-empty-btns { display: flex; flex-direction: column; gap: 3px; width: 100%; }
html body .ge-tile .ge-go { min-height: 28px; padding: 2px; justify-content: center; }
html body .ge-tile .ge-go .ui-art { width: 20px; height: 20px; margin: 0; }
/* Making windows: the recipe grid takes the whole width; the picked recipe is one strip beneath it (no empty column). */
html body .prod-body { display: flex; flex-direction: column; gap: 8px; }
html body .prod-detail { flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--ui-line); }
html body .prod-detail .prod-head { margin: 0; }
html body .prod-detail > .win-caption { display: none; }
html body .prod-detail .prod-mats { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
html body .prod-detail .prod-mat > span:last-child { font-size: 0; }
html body .prod-detail .prod-mat > span:last-child small { font-size: 10px; display: block; margin: 0; }
/* Service tiles (the inn): picture, a number where it matters, the action; the words on hover. */
html body .svc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; margin: 6px 0; }
html body .svc-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 4px; background: var(--ui-cell); border: 1px solid var(--ui-slot-line); border-radius: var(--ui-radius); }
html body .svc-tile > .ui-art,
html body .svc-tile > .item-thumb { width: 32px; height: 32px; }
html body .svc-tile > b { font: 700 10px/1 var(--ui-font); color: #f2d37c; }
html body .svc-tile > button { width: 100%; min-height: 24px; padding: 2px 4px; font-size: 11px; }
/* Bank presets: three small tiles in a row. */
html body .presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
html body .presets .preset { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 3px; background: var(--ui-cell); border: 1px solid var(--ui-slot-line); border-radius: var(--ui-radius); }
html body .presets .preset > b { text-align: center; font: 700 12px/1.2 var(--ui-font); color: var(--ui-title); }
html body .presets .preset.empty > b { color: var(--ui-muted); }
html body .presets .preset button { min-height: 22px; padding: 1px 4px; font-size: 10.5px; }
/* Diaries: tasks in two columns; a claimed tier folds to its head. Slayer/clue pills and the title picker stay small. */
html body .diary-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
html body .diary-tier.done .diary-tasks,
html body .diary-tier.done .diary-perk { display: none; }
html body .title-pick { width: 100%; min-height: 28px; margin: 4px 0 8px; }
/* Map list: each row its name and icon buttons; where it is and what it is on hover. Categories two across. */
html body .map-row .map-row-main small { display: none; }
html body .map-row .map-row-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
html body .map-row .map-row-acts button > span { display: none; }
html body .map-row .map-row-acts button { min-width: 28px; padding: 3px; }
html body .map-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
html body .map-cats .map-cat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* A player's card: one row of picture buttons, names on hover. */
html body .card-actions.icon-strip { display: flex; flex-wrap: nowrap; gap: 4px; }
html body .card-actions.icon-strip > button { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 3px; justify-content: center; }
html body .card-actions.icon-strip :is(svg, .ui-art) { width: 18px; height: 18px; margin: 0; }
html body .ring-record { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0; }
html body .ring-record svg { width: 14px; height: 14px; }
/* Dialogue lists (teachers, capes, work orders, Bryn's shop): name and action per row, two across; the line on hover. */
html body .list-row.dlg-row .list-main small { display: none; }
html body .list-row.dlg-row .list-main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body :has(> .list-row.dlg-row + .list-row.dlg-row) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-content: start; }
html body :has(> .list-row.dlg-row + .list-row.dlg-row) > :not(.list-row) { grid-column: 1 / -1; }
/* Echoes: rows show the picture, the name on one line and the number; the explanation on hover; queue and courier two across. */
html body .list-row.echo-comp:not(.courier-pick) .list-main small { display: none; }
html body .courier-pick .list-main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; align-items: baseline; }
html body .courier-pick .list-main small { margin: 0; font-weight: 700; color: var(--ui-text); }
html body form[data-courier-form] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
html body form[data-courier-form] > :not(.courier-pick) { grid-column: 1 / -1; }
/* Commons: vote and built projects are picture tiles, names and perks on hover, the game's own palette. */
html body .vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; }
html body .vote-grid > button { min-height: 48px; padding: 3px; justify-content: center; background: var(--ui-cell); border: 1px solid var(--ui-slot-line); border-radius: var(--ui-radius); color: var(--ui-text); }
html body .vote-grid > button.selected { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); background: var(--ui-cell-raised); }
html body .vote-grid .vote-pic { width: 36px; height: 36px; }
html body :has(> .built-line + .built-line) { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
html body :has(> .built-line + .built-line) > :not(.built-line) { grid-column: 1 / -1; }
html body .built-line { justify-content: center; padding: 3px; background: var(--ui-cell); border: 1px solid var(--ui-slot-line); border-radius: var(--ui-radius); }
html body .built-line :is(.built-name, .built-by) { display: none; }
/* World events (features/events.js): the chip beside Players under the minimap — the most pressing event and its time,
   the whole list on hover — and the announcement card and Game line in the event's gold. */
html body :is(#events-chip, #minigame-chip) {
  position: static;
  flex: none;
  height: 36px;
  min-height: 36px;
  max-width: 230px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 18px;
  background: var(--ui-win);
  border: 1px solid var(--ui-trim-hi, var(--ui-trim));
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.1), 0 4px 12px rgba(6, 14, 11, 0.35);
  color: var(--ui-title, var(--ui-text));
  font: 700 12px / 1 var(--ui-font);
  white-space: nowrap;
  cursor: pointer;
}
html body :is(#events-chip, #minigame-chip)[hidden] {
  display: none;
}
html body :is(#events-chip, #minigame-chip) span {
  overflow: hidden;
  text-overflow: ellipsis;
}
#minigame-chip .events-dot,
#events-chip .events-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--ui-muted);
}
#minigame-chip.live,
#events-chip.live {
  border-color: var(--ui-glow);
  color: var(--ui-select);
}
#minigame-chip.live .events-dot,
#events-chip.live .events-dot {
  background: var(--ui-glow);
  box-shadow: 0 0 6px var(--ui-glow);
  animation: events-pulse 1.6s ease-in-out infinite;
}
@keyframes events-pulse {
  50% { transform: scale(1.45); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  #events-chip.live .events-dot { animation: none; }
}
html body #toasts .toast.event {
  display: flex;
  align-items: center;
  gap: 8px;
  border-color: var(--ui-glow);
  background: linear-gradient(180deg, rgba(74, 52, 18, 0.94), rgba(38, 26, 10, 0.94));
  color: var(--ui-select);
  font-weight: 700;
}
#chat-lines .chat-line.system.event .chat-text,
#game-lines li.event {
  color: var(--ui-title);
}

/* XP drops (game/ui/progress.js): the skill's picture and the gain, floating up beside your head with every grant. */
.xp-drop {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform, opacity;
  font: 700 15px / 1 var(--ui-font);
  color: var(--ui-select);
  text-shadow: 1px 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.6);
  font-variant-numeric: tabular-nums;
}
.xp-drop .xp-drop-art {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 1px #000);
}
/* The milestone banner: levels 50, 75, 92 and 99, and every hundred total levels. It springs in across the top,
   the skill's picture turning in its painted rays (the laurel at 99), and fades up after a few seconds; a click
   opens the skill's guide. */
#milestone-banner {
  position: fixed;
  left: 50%;
  top: 11%;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(520px, 92vw);
  padding: 10px 24px 10px 14px;
  border: 1px solid var(--ui-trim-hi);
  border-radius: 10px;
  background: radial-gradient(120% 140% at 20% 50%, rgba(217, 185, 120, 0.22), transparent 60%), var(--ui-win);
  box-shadow: var(--ui-frame), 0 0 32px rgba(255, 214, 107, 0.25);
  color: var(--ui-text);
  font: 600 14px / 1.3 var(--ui-font);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px) scale(0.9);
}
#milestone-banner.in {
  animation: milestone-in 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
  pointer-events: auto;
}
#milestone-banner.out {
  animation: milestone-out 0.6s ease-in forwards;
  pointer-events: none;
}
@keyframes milestone-in {
  from { opacity: 0; transform: translate(-50%, -12px) scale(0.7); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes milestone-out {
  from { opacity: 1; transform: translate(-50%, 0) scale(1); }
  to { opacity: 0; transform: translate(-50%, -24px) scale(0.96); }
}
#milestone-banner .mb-burst {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}
#milestone-banner .mb-burst::before {
  content: "";
  position: absolute;
  inset: -14px;
  background: url(art/ui/toasts/levelup-rays.png) center / contain no-repeat;
  animation: milestone-rays 9s linear infinite;
}
#milestone-banner.max .mb-burst::before {
  inset: -12px -12px -15px;
  background-image: url(art/ui/toasts/levelup-99.png);
  animation: none;
}
#milestone-banner .mb-art {
  position: relative;
  width: 44px;
  height: 44px;
}
#milestone-banner.max .mb-art {
  transform: translateY(-3px) scale(0.8);
}
@keyframes milestone-rays {
  to { transform: rotate(360deg); }
}
#milestone-banner .mb-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
#milestone-banner small {
  font: 700 11px / 1.2 var(--ui-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-muted);
}
#milestone-banner strong {
  font: 700 22px / 1.15 var(--ui-font);
  color: var(--ui-title);
  text-shadow: 1px 1px 0 #000;
}
#milestone-banner.max {
  border-color: var(--ui-select);
  background: radial-gradient(120% 160% at 20% 50%, rgba(255, 214, 107, 0.35), transparent 65%), var(--ui-win);
  box-shadow: var(--ui-frame), 0 0 48px rgba(255, 214, 107, 0.45);
}
#milestone-banner.max strong {
  color: var(--ui-select);
}
@media (prefers-reduced-motion: reduce) {
  #milestone-banner.in,
  #milestone-banner.out {
    animation-duration: 0.01s;
  }
  #milestone-banner .mb-burst::before {
    animation: none;
  }
}
/* A mastered skill in the Skills tab: a gold edge, the cape on hover. */
.stat-cell.mastered {
  border-color: rgba(255, 214, 107, 0.7);
  box-shadow: inset 0 0 10px rgba(255, 214, 107, 0.22);
}
.stat-cell.mastered > b {
  color: var(--ui-select);
}
/* Hover on the last controls that had none: the quest tracker's main action brightens, chat's fold mark lights. */
@media (hover: hover) {
  html body #quest .quest-go.main:hover {
    filter: brightness(1.1);
  }
  #chat-min:hover {
    background: var(--ui-cell-hover);
    color: var(--ui-select);
  }
}

/* Wardrobe (Log · Wardrobe, panels.js wardrobeHtml): an outfit or dye as a small tunic-over-trousers swatch. */
.wd-swatch {
  display: block;
  width: 26px;
  height: 30px;
  margin: auto;
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(var(--wd-top) 0 56%, var(--wd-bottom) 56% 100%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.4), inset 0 2px 0 rgb(255 255 255 / 0.18);
}
.unearned .wd-swatch { filter: grayscale(0.85) brightness(0.7); }
.wd-open { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 6px; }
.wd-open .ui-art { width: 18px; height: 18px; }
/* The House window (game/features/home.js): a hotspot's furniture as a grid of cards, materials as icon counts. */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.home-piece { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: var(--ui-radius); background: var(--ui-cell); border: 1px solid var(--ui-line); }
.home-piece.locked { opacity: 0.6; }
.home-piece small { color: var(--ui-muted); }
.home-mats { display: flex; flex-wrap: wrap; gap: 4px; }
.home-mat { display: inline-flex; align-items: center; gap: 2px; }
.home-mat svg, .home-mat img { width: 20px; height: 20px; }
.home-mat.short b { color: var(--ui-bad); }
.home-visit { display: flex; gap: 6px; margin: 4px 0 8px; }
.home-visit input { flex: 1; min-width: 0; }