/* BRITANNIA REFORGED — parchment-and-iron UI over a pixel canvas. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0a0908;
  font-family: Georgia, 'Times New Roman', serif;
  user-select: none;
  -webkit-user-select: none;
}
/* typed fields stay selectable (R3-39): the page-wide user-select:none is
   inherited by inputs in WebKit, which then refuse a click-drag or Ctrl+A */
input, textarea { user-select: text; -webkit-user-select: text; }

#game {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  cursor: default;
  background: #0a0908;
}

.hidden { display: none !important; }

/* ---- shared panel chrome ---- */
.panel {
  background: linear-gradient(160deg, #e8d9b0 0%, #d9c48f 55%, #cdb478 100%);
  border: 2px solid #4a3826;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.6), inset 0 0 0 1px #f4ecd4;
  color: #2b2013;
}

/* ---- HUD ---- */
#hud { position: absolute; inset: 0; pointer-events: none; }

#self-status {
  position: absolute; top: 14px; left: 14px;
  width: 230px; padding: 8px 10px; z-index: 2;
}
.status-name { font-weight: bold; font-size: 15px; margin-bottom: 5px; letter-spacing: .5px; }
#current-weapon {
  margin-top: 5px; color: #f2d37d;
  font: bold 10px/1.35 Verdana, sans-serif; letter-spacing: .3px;
}
#current-weapon-name, #current-weapon-meta { display: block; }
#current-weapon-meta {
  margin-top: 2px; color: #d8d0bc; font-size: 9px; font-weight: normal;
  letter-spacing: 0;
}

.bar {
  position: relative; height: 15px; margin: 4px 0;
  background: #3a2d1c; border: 1px solid #241a0e; border-radius: 3px;
  overflow: hidden;
}
.bar.small { height: 10px; }
.bar .fill { height: 100%; width: 100%; transition: width 90ms linear; }
.bar.hp .fill   { background: linear-gradient(#d8433b, #9c2018); }
.bar.mana .fill { background: linear-gradient(#4a7dd8, #2c4f9c); }
.bar.stam .fill { background: linear-gradient(#d8b23b, #9c7a18); }
.bar.xp .fill   { background: linear-gradient(#b884d8, #704695); }
.bar span {
  position: absolute; inset: 0; text-align: center;
  font-size: 11px; line-height: 15px; color: #fff;
  text-shadow: 0 1px 2px #000; font-family: Verdana, sans-serif;
}

#enemy-status {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 220px; padding: 6px 10px; z-index: 2;
}

#ally-panel {
  position: absolute; top: 128px; left: 14px;
  width: 190px; padding: 6px 10px; z-index: 2;
}
.crew-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.crew-name {
  flex: 0 0 78px; font-size: 11px; font-weight: bold;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crew-row .bar { flex: 1; margin: 0; }
.crew-row.dead { opacity: 0.45; }
.crew-row.dead .crew-name { text-decoration: line-through; }

#score {
  position: absolute; top: 14px; right: 14px;
  padding: 8px 14px; text-align: center; z-index: 2;
}
#siege-status { margin-top: 4px; font-size: 11px; line-height: 1.5; }
#delve-objective {
  width: 360px; max-width: 38vw; margin: 7px -6px -2px; padding: 6px 9px 7px;
  border-top: 1px solid rgba(74,56,38,.55);
  background: linear-gradient(90deg, rgba(74,56,38,.08), rgba(244,236,212,.3), rgba(74,56,38,.08));
  text-align: left;
}
#delve-objective span {
  display: block; margin-bottom: 2px; color: #7a1f1f;
  font: bold 9px/1.2 Verdana, sans-serif; letter-spacing: 1.2px;
}
#delve-objective strong {
  display: block; color: #2b2013;
  font: bold 12px/1.35 Georgia, 'Times New Roman', serif; letter-spacing: .15px;
}
#boss-bar {
  position: absolute; top: 110px; left: 50%; transform: translateX(-50%);
  width: 340px; padding: 6px 12px; text-align: center;
}
#boss-bar .status-name { color: #7a1f1f; letter-spacing: 1.5px; }
#score-text { display: block; font-size: 22px; font-weight: bold; letter-spacing: 2px; }
#round-text { display: block; font-size: 12px; margin-top: 2px; }

/* ---- hotbar ---- */
#hotbar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  width: max-content; max-width: calc(100vw - 8px); pointer-events: none;
}
/* what is done to thee right now (stuns became slows, 2026-10-06): one chip each
   for a slow, a root, a stagger or a paralysis, with the seconds left */
#control-status {
  position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 6;
  display: flex; gap: 6px; pointer-events: none;
}
#control-status .cc-chip {
  display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px;
  background: rgba(20, 16, 12, .88); border: 1px solid #806445; border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.6); color: #f4ecd4;
  font: bold 11px/1.1 Georgia, serif; letter-spacing: .8px; white-space: nowrap;
}
#control-status .cc-chip i {
  width: 16px; height: 16px; border-radius: 50%; display: inline-block; font-style: normal;
  text-align: center; line-height: 16px; font-size: 11px; color: #10141a;
}
#control-status .cc-chip b { color: #d8c89a; font-weight: normal; }
#control-status .cc-slow { border-color: #4f9fc8; } #control-status .cc-slow i { background: #7fd4ff; }
#control-status .cc-root { border-color: #9a7a4a; } #control-status .cc-root i { background: #c9a46a; }
#control-status .cc-stun { border-color: #c8a04f; } #control-status .cc-stun i { background: #ffd77a; }
#control-status .cc-para { border-color: #6f7fd0; } #control-status .cc-para i { background: #a8b4ff; }
#action-unbind {
  position: absolute; left: 50%; bottom: 70px; z-index: 7;
  min-width: 190px; padding: 5px 12px; opacity: 0;
  color: #cdb478; text-align: center; pointer-events: none;
  background: rgba(31, 22, 14, .92); border: 1px solid #806445;
  box-shadow: 0 2px 8px rgba(0,0,0,.68), inset 0 0 0 1px rgba(244,236,212,.14);
  transform: translate(-50%, 5px); transition: opacity 120ms, transform 120ms;
  font: bold 9px/1.2 Georgia, serif; letter-spacing: 1.2px;
}
.action-slot-dragging #action-unbind {
  opacity: .82; pointer-events: auto; transform: translate(-50%, 0);
}
.action-slot-dragging #action-unbind.drop-ready {
  opacity: 1; color: #fff0a0; border-color: #d89b36;
  box-shadow: 0 0 12px rgba(216,155,54,.72), inset 0 0 0 1px #f4ecd4;
}
.action-slot-dragging .action-slot[draggable="true"] { cursor: grab; }

#now-playing {
  position: fixed; right: 14px; bottom: 78px; z-index: 30;
  max-width: min(300px, calc(100vw - 28px)); padding: 6px 11px;
  opacity: 0; visibility: hidden; pointer-events: none;
  color: #ead8a9; background: rgba(35, 25, 15, .9);
  border: 1px solid #796043; border-radius: 2px;
  box-shadow: 0 2px 9px rgba(0,0,0,.72), inset 0 0 0 1px rgba(244,236,212,.12);
  font: italic 11px/1.25 Georgia, serif; letter-spacing: .35px;
}
#now-playing.show { animation: now-playing-fade 4.8s ease-in-out both; }
@keyframes now-playing-fade {
  0% { opacity: 0; visibility: visible; transform: translateY(4px); }
  10%, 72% { opacity: .94; visibility: visible; transform: translateY(0); }
  100% { opacity: 0; visibility: hidden; transform: translateY(-2px); }
}

/* DELVE spirit panel: the objective parchment becomes a death clock. */
#ghost-hud {
  pointer-events: auto; z-index: 7;
  position: absolute; top: 132px; left: 50%; transform: translateX(-50%);
  width: 430px; max-width: 84vw; padding: 11px 15px;
  color: #dce8e8; text-align: center;
  background: linear-gradient(160deg, rgba(18,24,27,.95), rgba(43,48,48,.92));
  border: 1.5px solid #aebfc0; border-radius: 6px;
  box-shadow: 0 5px 22px rgba(0,0,0,.78), inset 0 0 24px rgba(213,235,235,.08);
  font: 12px/1.45 Georgia, 'Times New Roman', serif;
}
#ghost-title { color: #f0f6f6; font-weight: bold; letter-spacing: 1.5px; }
#ghost-countdown { margin-left: 10px; color: #fff2bd; font-size: 20px; }
#ghost-instruction { margin-top: 4px; font-size: 15px; }
#ghost-context { color: #b8c6c6; font: 10px/1.5 Verdana, sans-serif; }
#ghost-return {
  margin-top: 8px; padding: 6px 12px; cursor: pointer;
  color: #eef5f5; background: #3a4445; border: 1px solid #aebfc0; border-radius: 4px;
  font: bold 11px Georgia, serif; letter-spacing: .7px;
}
#ghost-return:hover { background: #536263; box-shadow: 0 0 10px rgba(205,232,232,.28); }
/* M10: the spirit clicks through its own words to the world (a door, a corpse); only the button takes a click */
#ghost-hud { pointer-events: none; }
#ghost-hud #ghost-return { pointer-events: auto; }
#ghost-return span { color: #fff2bd; margin-left: 5px; }
.delve-hud:has(#ghost-hud:not(.hidden)) #hotbar,
.delve-hud:has(#ghost-hud:not(.hidden)) #delve-objective { visibility: hidden; }
.slot {
  position: relative; width: 46px; height: 46px; flex: 0 0 46px;
  background: linear-gradient(160deg, #e8d9b0, #cdb478);
  border: 2px solid #4a3826; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.55), inset 0 0 0 1px #f4ecd4;
  overflow: hidden;
}
.slot img, .slot canvas { position: absolute; inset: 3px; width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.slot.action-slot { pointer-events: auto; }
.slot.tech-action { margin-left: 4px; }
.slot.action-slot.drop-ready { border-color: #fff0a0; box-shadow: 0 0 14px 4px #d89b36, inset 0 0 0 1px #fff8d8; }
.slot .key {
  position: absolute; top: 1px; left: 3px; z-index: 3;
  font: bold 11px Verdana, sans-serif; color: #f4ecd4; text-shadow: 0 1px 2px #000;
}
.slot .count {
  position: absolute; bottom: 1px; right: 4px; z-index: 3;
  font: bold 12px Verdana, sans-serif; color: #fff; text-shadow: 0 1px 2px #000;
}
.slot .cd {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(20, 12, 4, .72);
  transform-origin: bottom;
}
.slot.swing-cue-absent .swing-ready-cue { display: none; }
.slot.swing-ready::before {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border: 2px solid #fff4ad; border-radius: 4px;
  animation: swing-ready-flash 280ms steps(2, end) both;
}
@keyframes swing-ready-flash {
  0% { opacity: 1; box-shadow: inset 0 0 12px #fff, 0 0 15px #ffd85a; }
  100% { opacity: 0; box-shadow: inset 0 0 0 transparent, 0 0 0 transparent; }
}
.slot .label {
  position: absolute; bottom: 2px; left: 2px; right: 2px; z-index: 3; text-align: center;
  font: bold 7px/8px Georgia, serif; color: #2b2013; text-shadow: 0 1px 0 #f4ecd4;
}
.slot.held { box-shadow: 0 0 14px 4px #7fd4ff, inset 0 0 0 1px #f4ecd4; border-color: #7fd4ff; }
/* an armed weapon special: the client lit its ability icon red */
.slot.held.special-armed { box-shadow: 0 0 12px 3px #c83a2a, inset 0 0 0 1px #f4d8c8; border-color: #e0685a; }
.slot.held.special-armed img { filter: sepia(0.6) saturate(2.4) hue-rotate(-28deg); }
.slot.casting { border-color: #d8b23b; }
.slot.dead { filter: grayscale(1) brightness(.7); }
.slot.unknown { filter: grayscale(1) brightness(.45); }
.slot.unknown::after {
  content: '?'; position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font: bold 26px Georgia, serif; color: #f4ecd4;
  text-shadow: 0 1px 3px #000;
}

#swing-debug {
  position: fixed; top: 10px; right: 10px; z-index: 50;
  width: min(590px, calc(100vw - 20px)); padding: 8px 10px;
  pointer-events: none; color: #e8ddbd; background: rgba(12, 10, 8, .91);
  border: 1px solid #b99954; box-shadow: 0 2px 10px rgba(0,0,0,.75);
  font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#swing-debug strong { display: block; color: #ffd968; letter-spacing: 1px; }
#swing-debug b { display: inline-block; width: 42px; color: #ffcf69; }

/* ---- journal ---- */
#journal {
  position: absolute; bottom: 42px; left: 14px; z-index: 9; /* overlays gumps, as the client's does */
  width: 340px; max-height: 180px; pointer-events: none;
  font: 13px/1.45 Verdana, sans-serif;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  overflow: hidden;
}
#journal div { opacity: 1; transition: opacity 1.2s ease; }
#journal div.fading { opacity: 0; }
/* GAME_DESIGN §4.4: a +0.1 skill line is authentic but quiet */
#journal div.quiet { font-size: 11px; line-height: 1.35; }

/* ---- banner ---- */
/* Above the body's head (the player is at screen centre, the name plate ~14% above it) and on its own
   soft plate, so world names and the player's own plate never read through the subtitle. */
#banner {
  position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; z-index: 4;
  padding: 8px 26px 10px; border-radius: 10px;
  background: radial-gradient(ellipse at center, rgba(8, 7, 6, .72) 0%, rgba(8, 7, 6, .5) 60%, rgba(8, 7, 6, 0) 100%);
}
#banner-text {
  font-size: 46px; font-weight: bold; color: #f4ecd4;
  text-shadow: 0 2px 6px #000, 0 0 18px rgba(216, 178, 59, .8);
  letter-spacing: 3px;
}
#banner.skill-banner #banner-text { font-size: 32px; letter-spacing: 2px; white-space: nowrap; color: #ffe7a8; }
#banner-sub {
  font-size: 18px; color: #e8d9b0; margin-top: 6px; line-height: 1.25; white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}

#netstat {
  position: absolute; bottom: 14px; right: 14px;
  font: 11px Verdana, sans-serif; color: #9c9c9c; text-shadow: 0 1px 2px #000;
}

/* ---- perk offer (the gods' boons) ---- */
#perk-offer {
  position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; pointer-events: none; z-index: 5;
}
.offer-heading { display: none; }
.perk-card {
  pointer-events: auto; cursor: pointer;
  width: 190px; padding: 10px 12px;
  background: linear-gradient(160deg, #ede0bc 0%, #d9c48f 60%, #cdb478 100%);
  border: 2px solid #4a3826; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.7), inset 0 0 0 1px #f4ecd4;
  color: #2b2013;
}
.perk-card:hover { box-shadow: 0 0 16px 3px rgba(232,178,90,.65), 0 4px 14px rgba(0,0,0,.7); }
.perk-card.silly { border-color: #7a5a9a; }
.perk-card.spell { border-color: #2a4a8c; box-shadow: 0 0 14px 2px rgba(74,125,216,.5), 0 4px 14px rgba(0,0,0,.7); }
.perk-tag { font: bold 9px Verdana, sans-serif; color: #2a4a8c; margin-bottom: 2px; letter-spacing: .5px; }
.perk-key {
  display: inline-block; padding: 1px 7px; margin-bottom: 4px;
  background: #4a3826; color: #f4ecd4; border-radius: 3px;
  font: bold 12px Verdana, sans-serif;
}
.perk-name { font: bold 14px Georgia, serif; margin-bottom: 3px; }
.perk-desc { font-size: 11px; line-height: 1.4; }

/* ---- Undercity HUD: reserved lanes, no center-screen offer stack ---- */
.delve-hud #self-status { width: 278px; }
.delve-hud #current-weapon {
  min-height: 28px; padding-top: 1px; border-top: 1px solid rgba(244,236,212,.18);
}
.delve-hud #delve-xp { margin-top: 5px; }
.delve-hud #rogue-stats {
  min-height: 15px; margin-top: 5px; padding-top: 4px;
  border-top: 1px solid rgba(244,236,212,.18);
}
.delve-hud #ally-panel { top: 210px; width: 218px; }
.delve-hud #score { min-width: 374px; }

.delve-hud #perk-offer {
  top: 112px; right: 14px; bottom: auto; left: auto; transform: none;
  width: 242px; flex-direction: column; gap: 6px;
  padding: 8px;
  background: rgba(18, 16, 12, .94);
  border: 1.5px solid #d7b45d; border-radius: 7px;
  box-shadow: 0 6px 22px rgba(0,0,0,.78), inset 0 0 16px rgba(232,178,90,.06);
}
.delve-hud .offer-heading {
  display: block; padding: 1px 3px 5px; color: #ffe29a;
  font: bold 12px/1.25 Georgia, serif; letter-spacing: .6px;
  text-align: center; border-bottom: 1px solid rgba(215,180,93,.35);
}
.delve-hud .offer-heading small {
  display: block; margin-top: 2px; color: #d2c7ad;
  font: normal 9px/1.3 Verdana, sans-serif; letter-spacing: 0;
}
.delve-hud .perk-card { width: 224px; padding: 7px 9px; }
.delve-hud .perk-key { float: left; margin: 0 7px 3px 0; }
.delve-hud .perk-tag { margin-top: 1px; }
.delve-hud .perk-name { margin-bottom: 1px; font-size: 13px; }
.delve-hud .perk-desc { clear: both; font-size: 10px; line-height: 1.3; }

/* Transient delve calls occupy a compact HUD lane below the target frame. */
.delve-hud #banner {
  top: 82px; transform: translateX(-50%); min-width: 320px; max-width: 46vw;
  padding: 7px 14px; border: 1px solid rgba(215,180,93,.65); border-radius: 6px;
  background: rgba(12, 14, 16, .9); box-shadow: 0 4px 18px rgba(0,0,0,.72);
}
.delve-hud #banner-text { font-size: 21px; letter-spacing: 1.5px; }
.delve-hud #banner-sub { margin-top: 2px; font-size: 12px; }
.delve-hud #boss-bar { top: 160px; z-index: 2; }
.delve-hud.center-modal-open #banner { visibility: hidden; }
.delve-hud.pack-open #perk-offer { visibility: hidden; }

.control-tip {
  position: absolute; z-index: 9;
  padding: 9px 28px 7px 12px; pointer-events: auto; cursor: pointer;
  color: #d8d0bc; background: rgba(12, 14, 16, .82);
  border: 1px solid rgba(215,180,93,.4); border-radius: 5px;
  font: 10px/1.55 Verdana, sans-serif; text-align: center;
  text-shadow: 0 1px 2px #000;
  transition: opacity .8s;
}
.control-tip b { color: #ffe29a; }
.control-tip.fading { opacity: 0; }
.control-tip-close {
  position: absolute; right: 5px; top: 3px; width: 19px; height: 19px; padding: 0;
  border: 0; background: transparent; color: #d8d0bc; cursor: pointer;
  font: bold 16px/18px Verdana, sans-serif;
}
.control-tip-never {
  margin-top: 5px; padding: 1px 7px; border: 1px solid rgba(215,180,93,.45); border-radius: 3px;
  background: rgba(35,28,18,.9); color: #e6d5a5; cursor: pointer;
  font: 9px/1.45 Verdana, sans-serif;
}
.control-tip-close:hover, .control-tip-never:hover { color: #fff2bd; border-color: #d7b45d; }
#delve-controls-hint { right: 14px; bottom: 14px; width: 350px; }
/* playtest: the open world's first minutes show the keys (a newcomer walked 12 minutes before learning WASD) */
#world-controls-hint {
  left: 50%; bottom: 255px; transform: translateX(-50%); width: 580px;
}
#skills-controls-hint { left: 50%; bottom: 210px; transform: translateX(-50%); width: 410px; }
.delve-hud.controls-visible #netstat { bottom: 68px; }

@media (max-width: 1180px) {
  .delve-hud #delve-controls-hint { bottom: 76px; width: 320px; }
  .delve-hud.controls-visible #ability-bar { bottom: 132px; }
  .delve-hud.controls-visible #netstat { bottom: 132px; }
}

@media (max-height: 700px) {
  .delve-hud #perk-offer { top: 96px; gap: 4px; }
  .delve-hud .perk-card { padding: 5px 8px; }
  .delve-hud .perk-desc { display: none; }
}

/* ---- wild loadout picker ---- */
#loadout-row { margin: 8px 0 4px; }
#loadout-slots { display: flex; gap: 4px; justify-content: center; margin-bottom: 6px; }
#loadout-slots .ld-slot {
  width: 40px; height: 40px; border: 2px solid #4a3826; border-radius: 5px;
  background: rgba(43,32,19,.25); cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
}
#loadout-slots .ld-slot img { max-width: 34px; max-height: 34px; pointer-events: none; }
#loadout-slots .ld-slot .k {
  position: absolute; top: -2px; left: 1px; font: bold 9px Verdana, sans-serif; color: #f4ecd4;
  text-shadow: 0 1px 2px #000;
}
#loadout-book {
  display: grid; grid-template-columns: repeat(10, 34px); gap: 3px; justify-content: center;
}
#loadout-book .ld-spell {
  width: 34px; height: 34px; border: 1px solid #4a3826; border-radius: 4px;
  background: rgba(43,32,19,.12); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#loadout-book .ld-spell img { max-width: 30px; max-height: 30px; pointer-events: none; }
#loadout-book .ld-spell.used { opacity: .3; }
#loadout-book .ld-spell:hover { background: rgba(43,32,19,.3); }
#loadout-row .loadout-hint { font: italic 10px Georgia, serif; opacity: .8; margin-top: 5px; text-align: center; }

/* ---- classic UO container gumps ---- */
.uo-gump, .container-panel {
  background: linear-gradient(160deg, #ede0bc 0%, #d9c48f 60%, #cdb478 100%);
  border: 2px solid #4a3826; border-radius: 6px;
  padding: 10px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.7), inset 0 0 0 1px #f4ecd4;
  color: #2b2013; font-family: Georgia, serif; pointer-events: auto; z-index: 6;
}
.uo-gump { position: absolute; max-height: calc(100vh - 90px); }
#paperdoll-panel {
  right: 330px; top: 70px; width: 262px; height: 324px; max-height: none;
  box-sizing: border-box; padding: 0; border: 0; border-radius: 0;
  background: url('assets/uo/paperdoll/02000-0x07D0.png') 0 0 / 262px 324px no-repeat;
  box-shadow: none; filter: drop-shadow(0 5px 8px rgba(0,0,0,.72));
  color: #17140f; overflow: visible;
}
#dye-panel { left: 50%; top: 50%; width: 286px; transform: translate(-50%, -50%); }
.pp-title { font: bold 14px Georgia, serif; margin-bottom: 6px; user-select: none; }
.uo-drag-handle, #paperdoll-panel, #pack-panel, #skill-panel, #dye-panel, #bank-panel, #weapon-vendor-panel, .container-gump, #journal-panel, #options-panel { cursor: move; }
.uo-close {
  width: 18px; height: 18px; padding: 0; border: 1px solid #4a3826; border-radius: 2px;
  background: #5c4228; color: #f4ecd4; font: bold 13px/15px Georgia, serif;
  text-align: center; cursor: pointer;
}
.pp-title > .uo-close { float: right; margin-left: 5px; }
.pp-key {
  float: right; background: #4a3826; color: #f4ecd4; border-radius: 3px;
  padding: 0 6px; font: bold 11px Verdana, sans-serif;
}
#paperdoll-panel > .uo-close {
  position: absolute; right: 7px; top: 7px; z-index: 12;
  border-color: #80715c; background: #302b24; color: #e8dfcb;
  box-shadow: inset 0 0 0 1px #17140f;
}
#pp-doll { position: absolute; inset: 0; height: 324px; margin: 0; overflow: visible; z-index: 2; }
#pp-portrait {
  position: absolute; left: 9px; top: 20px; width: 260px; height: 237px;
  display: block; margin: 0; image-rendering: pixelated; filter: none; pointer-events: none;
}
#paperdoll-panel .pp-slot {
  position: absolute; display: block; background: transparent; border: 0; border-radius: 0;
  cursor: move; z-index: 3;
}
#paperdoll-panel .pp-slot.item-tip-target { cursor: pointer; }
#paperdoll-panel .pp-slot > * { display: none; }
#paperdoll-panel #pp-weapon { left: 128px; top: 75px; width: 48px; height: 120px; z-index: 13; }
#paperdoll-panel #pp-offhand { left: 19px; top: 76px; width: 48px; height: 118px; z-index: 14; }
#paperdoll-panel #pp-shield { left: 19px; top: 76px; width: 48px; height: 118px; z-index: 13; }
/* UO layered clothing. Grab areas stack exactly like the drawn layers
   (sprites.js PAPERDOLL_ITEM_Z): pants and shirt under the steel (z 5-6),
   then doublet, skirt, apron, robe, cloak, hat — so the OUTERMOST worn garment
   is the one grabbed first. The doll now picks by the layers' own pixels
   (ui.js wireDoll, doll-pick.js); these rects remain the seats' named places
   (the drop glow of an empty seat, the fallback when a layer's pixels cannot
   be read). The cloak is clipped to its shoulders and side drapes so the robe
   beneath it stays reachable. */
#paperdoll-panel #pp-pants { left: 74px; top: 148px; width: 54px; height: 88px; z-index: 3; }
#paperdoll-panel #pp-shirt { left: 48px; top: 90px; width: 84px; height: 66px; z-index: 4; }
#paperdoll-panel #pp-midtorso { left: 70px; top: 90px; width: 62px; height: 64px; z-index: 7; }
#paperdoll-panel #pp-skirt { left: 66px; top: 150px; width: 70px; height: 80px; z-index: 8; }
#paperdoll-panel #pp-waist { left: 74px; top: 138px; width: 54px; height: 52px; z-index: 9; }
#paperdoll-panel #pp-garb { left: 38px; top: 64px; width: 103px; height: 184px; z-index: 10; }
#paperdoll-panel #pp-cloak {
  left: 50px; top: 80px; width: 98px; height: 170px; z-index: 11;
  /* shoulders plus the two hanging drapes; the middle belongs to the robe */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 78% 100%, 78% 18%, 22% 18%, 22% 100%, 0 100%);
}
#paperdoll-panel #pp-hat { left: 66px; top: 50px; width: 74px; height: 34px; z-index: 12; }
#paperdoll-panel #pp-helm { left: 77px; top: 39px; width: 52px; height: 35px; z-index: 6; }
#paperdoll-panel #pp-gorget { left: 79px; top: 75px; width: 44px; height: 18px; z-index: 6; }
#paperdoll-panel #pp-tunic { left: 76px; top: 94px; width: 50px; height: 54px; z-index: 5; }
#paperdoll-panel #pp-arms { left: 48px; top: 99px; width: 27px; height: 62px; z-index: 5; }
#paperdoll-panel #pp-gloves { left: 42px; top: 151px; width: 32px; height: 31px; z-index: 6; }
#paperdoll-panel #pp-legs { left: 78px; top: 150px; width: 46px; height: 82px; z-index: 5; }
#paperdoll-panel #pp-trinket { left: 132px; top: 44px; width: 25px; height: 31px; z-index: 14; }
#pp-name {
  position: absolute; left: 25px; top: 266px; width: 196px; height: 20px; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font: bold 14px Georgia, serif; line-height: 1; text-align: center;
  color: #17140f; text-shadow: 0 1px rgba(229,211,166,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
#pp-magic-armor {
  position: absolute; left: 16px; top: 244px; z-index: 5; pointer-events: none;
  color: #17140f; text-shadow: 0 1px rgba(229,211,166,.55);
  font: bold 9px Georgia, serif; letter-spacing: .2px;
}
#pp-button-strip { position: absolute; left: 188px; top: 228px; width: 64px; height: 22px; z-index: 5; }
#pp-peace-mode {
  width: 64px; height: 22px; margin: 0; padding: 0; border: 0; background: transparent;
  opacity: 1; appearance: none;
}
#pp-peace-mode:disabled { opacity: 1; }
#pp-peace-mode img { display: block; width: 64px; height: 22px; image-rendering: pixelated; }
#pp-skills {
  position: absolute; right: 0; top: 25px; width: 64px; height: 20px;
  border: 1px solid #80715c; background: #302b24; color: #e8dfcb;
  font: bold 9px Georgia, serif; cursor: pointer;
}
#pp-books {
  position: absolute; right: 0; top: 48px; width: 64px; height: 20px;
  border: 1px solid #80715c; background: #302b24; color: #e8dfcb;
  font: bold 9px Georgia, serif; cursor: pointer;
}

/* Original 0x08AC Magery book pixels; DOM text is confined to its pages. */
.spellbook-gump {
  position: absolute; z-index: 8; left: 22px; top: 72px; width: 406px; height: 229px;
  color: #392b1d; filter: drop-shadow(0 9px 13px #000b); user-select: none;
  pointer-events: auto; cursor: move;
}
.abilitybook-gump { left: auto; right: 22px; }
.spellbook-background { position: absolute; inset: 0; width: 406px; height: 229px; image-rendering: pixelated; pointer-events: none; }
.spellbook-close {
  position: absolute; z-index: 4; right: 13px; top: 3px; width: 22px; height: 22px;
  border: 1px solid #2a1c10; border-radius: 2px; padding: 0;
  color: #f4ecd4; background: #5c4228; font: bold 16px/19px Georgia, serif; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}
.spellbook-close:hover, .uo-close:hover { background: #7a2a1f; }
.spellbook-corner { position: absolute; z-index: 3; top: 8px; width: 37px; height: 27px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.spellbook-corner:disabled { opacity: .25; cursor: default; }
.spellbook-corner.previous { left: 50px; }
.spellbook-corner.next { right: 49px; }
.spellbook-corner img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.spellbook-contents {
  position: absolute; z-index: 2; left: 58px; top: 16px; display: grid;
  grid-template-columns: 135px 135px; gap: 28px; width: 298px; height: 150px;
}
.spellbook-page h3 { margin: 11px 0 5px; color: #4d3523; font: normal 13px Georgia, serif; text-align: center; }
.spellbook-entry {
  display: grid; grid-template-columns: 22px 1fr; grid-template-rows: 12px 8px;
  width: 135px; min-height: 20px; border: 0; padding: 0; color: #523726;
  background: transparent; cursor: grab; text-align: left;
}
.spellbook-entry:hover, .spellbook-entry:focus-visible { color: #8f261f; outline: 1px dotted #7f4d2d; }
.spellbook-entry.unavailable { opacity: .48; }
.spellbook-entry:active { cursor: grabbing; }
.spellbook-entry img { grid-row: 1 / 3; width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.spellbook-entry strong { overflow: hidden; font: normal 10px/12px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.spellbook-entry small { overflow: hidden; color: #80664b; font: 7px/8px Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.spellbook-empty { margin: 30px 8px; color: #8a735b; font: italic 9px Georgia, serif; text-align: center; }
.spellbook-circles { position: absolute; z-index: 3; left: 57px; top: 175px; display: flex; justify-content: space-between; width: 299px; height: 20px; }
.spellbook-circles button { width: 21px; height: 20px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.spellbook-circles button.active { filter: drop-shadow(0 0 3px #d87d27) brightness(1.3); }
.spellbook-circles img { display: block; max-width: 21px; height: 20px; image-rendering: pixelated; }
.spellbook-hint { position: absolute; z-index: 3; left: 72px; top: 198px; width: 262px; margin: 0; color: #74583d; font: italic 8px Georgia, serif; text-align: center; pointer-events: none; }
.abilitybook-title { position: absolute; z-index: 3; left: 100px; top: 5px; width: 206px; color: #5a281f; font: bold 10px Georgia, serif; text-align: center; letter-spacing: .5px; }

/* The classic skills gump: scroll 0x1F40 (top, with the SKILLS title 0x0834),
   0x1F41 tiled down the middle, 0x1F43 rolled at the foot. Rows are name,
   value to a tenth and the lock arrow (0x0983 up, 0x0985 down, 0x082C lock). */
#skill-panel.skills-gump {
  left: 50%; top: 64px; transform: translateX(-50%); width: 345px; height: auto; max-height: none;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.72)); color: #1f160b;
}
.skills-gump .sg-top {
  position: relative; height: 37px; margin: 0;
  background: url('assets/uo/gumps/08000-0x1F40.png') 0 0 / 345px 37px no-repeat;
}
.skills-gump .sg-title {
  position: absolute; left: 140px; top: 12px; width: 65px; height: 13px;
  image-rendering: pixelated; pointer-events: none;
}
.skills-gump .sg-top .uo-close {
  position: absolute; right: 34px; top: 8px; width: 20px; height: 20px;
  font-size: 14px; line-height: 17px; box-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}
.skills-gump .sg-body {
  position: relative; margin: -1px 0 0 18px; width: 302px; box-sizing: border-box;
  max-height: calc(100vh - 170px); overflow-y: auto; padding: 0 30px 2px 24px;
  background: url('assets/uo/gumps/08001-0x1F41.png') 0 0 / 302px 70px repeat-y;
  scrollbar-width: thin; scrollbar-color: #6b4a2a transparent;
}
.skills-gump .sg-bottom {
  height: 34px; margin: -1px 0 0 16px; width: 314px;
  background: url('assets/uo/gumps/08003-0x1F43.png') 0 0 / 314px 34px no-repeat;
}
#skill-char-title {
  min-height: 14px; margin: 0 0 3px; text-align: center;
  font: italic 11px/14px Georgia, serif; color: #4a2c14;
}
#skill-catalog { margin: 0; }
.skills-gump .sg-group { margin: 0 0 3px; }
.skills-gump .sg-group-head {
  display: flex; align-items: center; gap: 5px; width: 100%; padding: 1px 0; margin: 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: bold 12px/16px Georgia, serif; color: #1a2a66; letter-spacing: .3px;
}
.skills-gump .sg-group-head img { width: 16px; height: 12px; image-rendering: pixelated; flex: 0 0 auto; object-fit: contain; }
.skills-gump .sg-group.folded .sg-group-head img { width: 12px; height: 16px; margin: 0 2px; }
.skills-gump .sg-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px 16px; align-items: center; gap: 4px;
  height: 16px; padding: 0 0 0 20px; cursor: default;
  font: 12px/16px Georgia, serif; color: #1f160b;
}
.skills-gump .sg-row:hover { background: rgba(120, 84, 40, .14); }
/* power scrolls: each skill's own cap (UO's Cap column); a raised one in scroll-blue */
.skills-gump .sg-row[data-skill] { grid-template-columns: minmax(0, 1fr) 40px 28px 16px; }
.skills-gump .sg-cap { text-align: right; font: 11px/16px 'Times New Roman', Times, serif; color: #6b5a40; font-variant-numeric: lining-nums tabular-nums; }
.skills-gump .sg-cap-raised { color: #1d3f8a; font-weight: bold; }
/* the Signature Ladder: the title worn after the name */
.skills-gump .sg-title-pick { padding: 2px 0 2px 20px; }
.skills-gump .sg-title-head { font: bold 12px/16px 'Times New Roman', Times, serif; color: #1f160b; }
.skills-gump .sg-title-row { display: block; padding: 0 0 0 6px; border: 0; background: none; cursor: pointer; text-align: left; font: italic 12px/15px Georgia, serif; color: #4a3a22; }
.skills-gump .sg-title-row:hover { color: #1d3f8a; }
.skills-gump .sg-title-row.worn { color: #1d3f8a; font-weight: bold; }
.skills-gump .sg-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.skills-gump .sg-value { text-align: right; font: 13px/16px 'Times New Roman', Times, serif; font-variant-numeric: lining-nums tabular-nums; }
.skills-gump .sg-lock {
  display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
}
.skills-gump .sg-lock img { display: block; image-rendering: pixelated; pointer-events: none; }
.skills-gump .sg-lock:hover img { filter: brightness(1.35) drop-shadow(0 0 2px rgba(255, 214, 120, .9)); }
#skill-summary {
  margin: 4px 0 0; padding: 12px 0 0;
  background: url('assets/uo/gumps/02091-0x082B.png') 50% 0 / 213px 11px no-repeat;
}
.skills-gump .sg-total { padding: 1px 0 1px 20px; font: bold 13px/16px 'Times New Roman', Times, serif; font-variant-numeric: lining-nums; color: #1f160b; }
.skills-gump .sg-stats { margin: 3px 0 2px; }
/* THE NEARING: a Warden's lent skill (+20.0 while in the shard) and the Marks a character bears */
.skills-gump .sg-lent { font: bold 11px/16px Georgia, serif; color: #1d3f8a; }
.skills-gump .sg-lent-row .sg-value { color: #1d3f8a; font-weight: bold; }
.skills-gump .sg-nearing { padding: 1px 0 1px 20px; font: italic 12px/15px Georgia, serif; color: #2a2a5a; }
.skills-gump .sg-none { margin: 8px 0; text-align: center; font: italic 12px Georgia, serif; }
.pp-slot.changed { animation: equip-slot-flash 1.8s ease-out; }
@keyframes equip-slot-flash {
  0%, 25% { box-shadow: inset 0 0 12px 2px var(--equip-color, #ffd24a); }
  100% { box-shadow: none; }
}
#pp-equip-change {
  position: absolute; left: 25px; width: 141px; top: 228px; z-index: 9;
  padding: 3px 5px; border-radius: 4px; background: rgba(43,32,19,.82);
  font: bold 10px Georgia, serif; text-align: center; text-shadow: 0 1px 2px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.container-panel .pp-label { font: bold 12px Georgia, serif; margin: 4px 0; }
.container-surface {
  position: relative; min-height: 210px; overflow: auto;
  padding: 8px 6px; border: 2px solid #51351f; border-radius: 7px;
  background: linear-gradient(145deg, #775130, #4b2d1b 70%, #3a2115);
  box-shadow: inset 0 0 16px rgba(0,0,0,.58), inset 0 0 0 1px rgba(224,184,112,.25);
}
#pp-grid { min-height: 285px; }
.pp-cell {
  width: 32px; height: 32px; background: rgba(19,11,7,.38);
  border: 1px solid rgba(218,180,112,.38); border-radius: 3px; cursor: grab;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.pp-cell.item-tip-target { cursor: grab; }
.container-surface > .pp-cell { position: absolute; z-index: 1; }
.pp-cell.dragging { opacity: .45; }
.uo-drop-zone.drag-over { border-color: #f1cf78; box-shadow: inset 0 0 18px rgba(255,218,117,.35), 0 0 9px rgba(255,210,90,.5); }
.pp-cell:hover { background: rgba(244,211,145,.2); border-color: #e4bd72; }
.pp-cell img, .pp-cell canvas { max-width: 28px; max-height: 28px; pointer-events: none; }
.pp-cell.empty { opacity: .25; cursor: default; }
.pp-cell .aff {
  position: absolute; inset: -2px; border-radius: 5px; border: 2px solid transparent; pointer-events: none;
}
.pp-slot .aff { position: absolute; inset: -2px; border: 2px solid transparent; border-radius: 5px; pointer-events: none; }
.pp-special {
  position: absolute; left: 1px; right: 1px; bottom: 0; padding: 1px;
  background: rgba(20,14,8,.82); font: bold 7px Verdana, sans-serif;
  line-height: 9px; text-align: center; text-transform: uppercase; text-shadow: 0 1px 2px #000;
  overflow: hidden; white-space: nowrap;
}
#dye-status { margin: -2px 0 7px; font: italic 10px Georgia, serif; opacity: .72; }
#dye-targets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
#dye-targets button {
  flex: 1; padding: 3px; border: 1px solid #5d472e; border-radius: 3px;
  background: rgba(74,56,38,.12); color: #2b2013; cursor: pointer;
  font: bold 9px Georgia, serif; text-transform: uppercase;
}
#dye-targets button.selected { background: #5d472e; color: #f4ecd4; }
#dye-targets button:disabled { opacity: .3; cursor: default; }
#dye-hues { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
#dye-hues .dye-hue {
  height: 15px; padding: 0; border: 1px solid #4a3826; border-radius: 3px;
  cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
#dye-hues .dye-hue:hover, #dye-hues .dye-hue.current {
  outline: 2px solid #f4ecd4; box-shadow: 0 0 0 2px #4a3826;
}

/* ---- temporary trial-armory vendor gump -------------------------------- */
#weapon-vendor-panel {
  left: 50%; top: 52px; transform: translateX(-50%);
  width: min(720px, calc(100vw - 28px)); height: min(720px, calc(100vh - 80px));
  overflow: hidden; padding: 12px 14px; z-index: 9;
}
#weapon-vendor-flavor {
  margin: -2px 0 8px; padding: 6px 8px;
  border: 1px solid rgba(74,56,38,.45); background: rgba(244,236,212,.34);
  color: #6f261e; font: italic 11px/1.35 Georgia, serif; text-align: center;
}
#weapon-vendor-list {
  height: calc(100% - 83px); overflow-y: auto; padding-right: 4px;
  border-top: 2px solid #5c4228;
}
.weapon-vendor-row {
  width: 100%; min-height: 52px; display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 104px; gap: 8px; align-items: center;
  padding: 6px 7px; border: 0; border-bottom: 1px solid rgba(74,56,38,.25);
  color: #2b2013; background: transparent; cursor: pointer; text-align: left;
  font-family: Georgia, serif;
}
.weapon-vendor-row:hover, .weapon-vendor-row:focus-visible {
  outline: 0; background: rgba(255,248,224,.58);
}
.weapon-vendor-icon { cursor: pointer; justify-self: center; }
.weapon-vendor-copy strong { display: block; font: bold 13px Georgia, serif; }
.weapon-vendor-copy small {
  display: block; margin-top: 3px; color: #5f4b34;
  font: 9px/1.35 Verdana, sans-serif;
}
.weapon-vendor-price {
  padding: 6px 8px; border: 1px solid #4a3826; border-radius: 3px;
  background: #5c4228; color: #f4ecd4; text-align: center;
  font: bold 9px Georgia, serif; letter-spacing: .35px;
}
#weapon-vendor-panel > .pp-hint {
  margin-top: 6px; font: italic 10px Georgia, serif; text-align: center; opacity: .76;
}

/* ---- bank box & corpse containers ---- */
.container-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 70px); overflow-y: auto;
  padding: 12px; color: #2b2013; font-family: Georgia, serif; pointer-events: auto; z-index: 8;
  background: linear-gradient(160deg, #ede0bc 0%, #d9c48f 60%, #cdb478 100%);
  border: 2px solid #4a3826; border-radius: 7px;
  box-shadow: 0 5px 20px rgba(0,0,0,.78), inset 0 0 0 1px #f4ecd4;
}
.container-panel .pp-title { font: bold 17px Georgia, serif; margin-bottom: 8px; }
.container-panel .pp-title button { float: right; cursor: pointer; }
.container-panel .pp-hint { margin-top: 8px; font: italic 11px Georgia, serif; text-align: center; }
.container-panel .container-surface { min-height: 180px; }
.container-gold { display: grid; grid-template-columns: 1fr auto auto 1fr; gap: 7px; align-items: center; margin-bottom: 10px; }
.container-gold span:last-child { text-align: right; }
.container-gold button {
  border: 1px solid #4a3826; border-radius: 4px; padding: 6px 9px; cursor: pointer;
  background: #5c4228; color: #f4ecd4; font: bold 10px Georgia, serif;
}
#bank-error { min-height: 14px; color: #8b221c; font-size: 11px; text-align: center; }
#bank-panel {
  position: absolute; left: 14px; top: 70px; width: 360px; height: 480px;
  background: url('assets/uo/gumps/00074-0x004A.png') no-repeat 0 0 / 360px 480px;
  border: 0; box-shadow: none; color: #ece4d4; font-family: Georgia, serif;
  image-rendering: pixelated; pointer-events: auto; z-index: 8; overflow: visible;
}
#bank-panel .bank-gump-title {
  position: absolute; left: 46px; right: 38px; top: 12px; height: 35px;
  color: #e8e4dc; font: bold 14px Georgia, serif; line-height: 35px;
  text-align: center; text-shadow: 0 1px 3px #000, 0 0 3px #000; user-select: none;
}
#bank-panel .bank-gump-title button {
  position: absolute; right: -12px; top: 2px; width: 25px; height: 25px; padding: 0;
  border: 1px solid #928c82; border-radius: 2px; background: #252728; color: #eee;
  font: bold 17px/21px Georgia, serif; cursor: pointer;
}
#bank-panel #bank-error {
  position: absolute; left: 28px; right: 28px; top: 51px; min-height: 14px;
  color: #ffb49d; font: bold 10px Verdana, sans-serif; text-shadow: 0 1px 2px #000;
}
#bank-panel .container-gold {
  position: absolute; left: 30px; top: 75px; width: 300px; height: 105px; margin: 0;
  grid-template-columns: 1fr 1fr; gap: 7px 9px; align-content: center;
  color: #f2e7d4; font: bold 11px Georgia, serif; text-shadow: 0 1px 2px #000;
}
#bank-panel .container-gold span:nth-child(1) { text-align: left; }
#bank-panel .container-gold span:last-child { text-align: right; }
#bank-panel .container-gold button {
  padding: 5px 6px; border-color: #a89b88; background: rgba(25, 24, 24, .88); color: #eee;
}
#bank-panel .bank-vault-label {
  position: absolute; left: 30px; right: 30px; top: 207px;
  color: #ddd6c9; font: bold 11px Georgia, serif; text-shadow: 0 1px 3px #000;
}
#bank-panel .bank-vault-label span { float: right; }
#bank-panel #bank-vault-grid {
  position: absolute; left: 24px; top: 229px; width: 312px; height: 174px;
  min-height: 0; box-sizing: border-box; overflow: auto; padding: 7px 6px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
#bank-panel #bank-vault-grid.drag-over { outline: 2px solid #f1cf78; outline-offset: -3px; }
#bank-panel .bank-hint {
  position: absolute; left: 38px; right: 38px; top: 426px;
  color: #e5e0d8; font: italic 10px Georgia, serif; text-align: center;
  text-shadow: 0 1px 3px #000;
}
.container-gump { left: 28px; width: min(330px, calc(100vw - 32px)); top: 176px; transform: none; }
.container-gump .container-surface { min-height: 120px; max-height: 190px; }
.container-gump .cg-loot-all {
  display: block; width: 100%; margin-top: 8px; background: #6f261e;
  border: 1px solid #4a3826; border-radius: 4px; padding: 6px 9px; cursor: pointer;
  color: #f4ecd4; font: bold 10px Georgia, serif;
}
@media (max-width: 620px) {
  .container-gold { grid-template-columns: 1fr 1fr; }
  #paperdoll-panel { right: auto; left: 8px; top: 58px; width: 262px; }
  .spellbook-gump { left: 4px; top: 55px; transform: scale(.78); transform-origin: top left; }
  .abilitybook-gump { left: 4px; right: auto; top: 245px; }
}

/* ---- tooltip ---- */
#tooltip {
  position: absolute; width: 280px; padding: 10px 12px;
  background: linear-gradient(160deg, #ede0bc 0%, #d9c48f 60%, #cdb478 100%);
  border: 2px solid #4a3826; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.7), inset 0 0 0 1px #f4ecd4;
  color: #2b2013; pointer-events: none; z-index: 10;
  font-family: Georgia, serif;
}
#tooltip.ground-loot-tooltip { width: 220px; padding: 8px 10px; }
.tt-title { font-size: 15px; font-weight: bold; }
.tt-title em { font-weight: normal; font-size: 12px; color: #2a4a8c; }
.tt-sub { font-size: 11px; font-style: italic; color: #6b543a; margin-bottom: 5px; }
.tt-body { font-size: 12px; line-height: 1.45; margin-bottom: 6px; }
.tt-stat {
  display: flex; justify-content: space-between;
  font: 11.5px Verdana, sans-serif; padding: 1px 0;
  border-bottom: 1px dotted rgba(74,56,38,.35);
}
.tt-stat span { color: #6b543a; }
.tt-hint { margin-top: 6px; font-size: 10.5px; font-style: italic; color: #6b543a; }
.tt-verdict { margin: 4px 0 6px; padding: 3px 6px; border-radius: 3px; font: bold 11px Verdana, sans-serif; }
.tt-better { color: #176b2d; }
.tt-worse { color: #a12626; }
.tt-equal { color: #705522; }
.tt-equipped { color: #2a4a8c; }
.tt-ground-meta { display: flex; justify-content: space-between; margin: 2px 0 4px; font: bold 10px Verdana, sans-serif; color: #6b543a; }
.tt-ground-meta .tt-equal { color: #666; }
.tt-ground .tt-hint { margin-top: 5px; }
.tt-verdict.tt-better { background: rgba(41,133,65,.12); border: 1px solid rgba(23,107,45,.35); }
.tt-verdict.tt-worse { background: rgba(170,45,45,.1); border: 1px solid rgba(161,38,38,.35); }
.tt-verdict.tt-equal, .tt-verdict.tt-equipped { background: rgba(74,56,38,.09); border: 1px solid rgba(74,56,38,.28); }
.tt-property { margin: 5px 0; padding: 5px 6px; border-left: 3px solid; background: rgba(43,32,19,.08); font-size: 11px; line-height: 1.35; }
.tt-require { margin-top: 5px; font: bold 10.5px Verdana, sans-serif; }
.tt-require.met { color: #176b2d; }
.tt-require.unmet { color: #a12626; }

/* ---- menu ---- */
#menu {
  z-index: 20;
  overflow-y: auto;
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  background: radial-gradient(ellipse at center, rgba(10,9,8,.4) 0%, rgba(10,9,8,.93) 75%);
}
#menu-card {
  width: min(900px, calc(100vw - 32px)); padding: 22px 26px 20px; text-align: center;
  background: linear-gradient(160deg, #e7d7aa 0%, #d3bd82 64%, #bda165 100%);
  border-color: #292018; border-radius: 2px;
  box-shadow: 0 10px 42px rgba(0,0,0,.82), inset 0 0 0 2px #f0e2b9,
    inset 0 0 26px rgba(76,54,30,.22);
}
#menu-card h1 {
  font-size: 32px; letter-spacing: 2px; color: #3a2a1c;
  text-shadow: 0 1px 0 #f4ecd4;
}
.subtitle { font-size: 14px; font-style: italic; margin: 1px 0 14px; color: #6b543a; }
#menu-loading { font-size: 15px; padding: 20px 0; }

.lobby-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
/* The CHOSEN tab is the dark, inked one with a gold rule under it; the other
   sits back in the parchment. (They used to be the other way round, so the
   tab thou wert NOT on looked selected.) */
.lobby-tab {
  min-height: 38px; padding: 7px 12px; cursor: pointer;
  color: #6b543a; background: rgba(244,236,212,.35); border: 2px solid rgba(74,56,38,.35);
  box-shadow: none;
  font: bold 13px Georgia, 'Times New Roman', serif; letter-spacing: 1.1px;
}
.lobby-tab:hover { color: #3a2a1c; background: rgba(244,236,212,.6); border-color: #4a3826; }
.lobby-tab.sel {
  color: #f4e6bd; background: #302b24; border-color: #17140f;
  box-shadow: inset 0 0 0 1px #80715c, inset 0 -3px 0 #d8b046, 0 1px 3px rgba(0,0,0,.45);
}
.lobby-body { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 24px; text-align: left; }
.lobby-paperdoll {
  position: relative; width: 262px; height: 324px;
  background: url('assets/uo/paperdoll/02000-0x07D0.png') 0 0 / 262px 324px no-repeat;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.66));
}
#lobby-paperdoll-canvas {
  position: absolute; left: 9px; top: 20px; width: 260px; height: 237px;
  image-rendering: pixelated; pointer-events: none;
}
#lobby-paperdoll-name {
  position: absolute; left: 25px; top: 266px; width: 196px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: #17140f; text-shadow: 0 1px rgba(229,211,166,.55);
  font: bold 13px/1 Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lobby-panel { min-width: 0; min-height: 324px; padding: 5px 2px 0; }
.lobby-panel h2 {
  color: #3c2a18; font: bold 18px Georgia, serif; letter-spacing: .4px;
  text-shadow: 0 1px #eee0b8;
}
.roster-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#roster-count { color: #6b543a; font: italic 11px Georgia, serif; }
#character-roster {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  max-height: 112px; margin: 8px 0 13px; overflow-y: auto;
}
.roster-character {
  min-width: 0; padding: 7px 9px; cursor: pointer; text-align: left;
  color: #302418; background: rgba(244,236,212,.52); border: 1px solid #715a39;
  box-shadow: inset 0 0 0 1px rgba(255,248,222,.5);
  font-family: Georgia, serif;
}
.roster-character strong, .roster-character span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roster-character strong { font-size: 12px; }
.roster-character span { margin-top: 2px; color: #6b543a; font-size: 10px; }
.roster-character:hover { background: #efe2bb; }
.roster-character.sel {
  color: #f4ecd4; background: #4a3826; border-color: #21180f;
  box-shadow: inset 0 0 0 1px #927755;
}
.roster-character.sel span { color: #ddcda5; }
.roster-empty, .character-empty {
  padding: 18px 12px; color: #6b543a; border: 1px dashed #806a48;
  text-align: center; font: italic 13px/1.45 Georgia, serif;
}
.character-empty { margin-top: 12px; }
#character-title { padding: 8px 0 6px; border-top: 1px solid rgba(74,56,38,.5); }
.character-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 18px; }
.character-details div {
  display: flex; justify-content: space-between; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid rgba(74,56,38,.26);
}
.character-details dt { color: #695033; font-size: 11px; }
.character-details dd { color: #2b2013; font-size: 12px; font-weight: bold; text-align: right; }
#create-panel { padding: 7px 18px 0 4px; }
#create-panel h2 { margin-bottom: 12px; }
.mlabel { font-size: 12px; font-weight: bold; margin: 8px 0 3px; color: #4a3826; }
#name-input, #join-code {
  width: 100%; padding: 6px 8px;
  font: 15px Georgia, serif; color: #2b2013;
  background: #f4ecd4; border: 2px solid #4a3826; border-radius: 4px;
  outline: none;
}
.toggle-row { display: flex; gap: 5px; }
.class-row { display: grid; grid-template-columns: 1fr 1fr; }
.toggle {
  flex: 1; padding: 5px 2px; cursor: pointer;
  font: 12px Georgia, serif; color: #4a3826;
  background: #d9c48f; border: 2px solid #4a3826; border-radius: 4px;
}
.toggle.sel { background: #4a3826; color: #f4ecd4; }
.skin-row { gap: 4px; }
.skin-swatch {
  flex: 1; height: 20px; cursor: pointer; padding: 0;
  border: 2px solid #4a3826; border-radius: 4px;
}
.skin-swatch.sel { outline: 2px solid #f4ecd4; outline-offset: -5px; }

.big-btn {
  display: block; width: 100%; margin-top: 10px; padding: 11px 0;
  font: bold 17px Georgia, serif; letter-spacing: 1px;
  color: #f4ecd4; background: linear-gradient(#6b543a, #4a3826);
  border: 2px solid #2b2013; border-radius: 6px; cursor: pointer;
  text-shadow: 0 1px 2px #000;
}
.big-btn:hover { filter: brightness(1.15); }
.big-btn:active { transform: translateY(1px); }
.big-btn.half { width: 100%; }

.online-row { display: flex; gap: 8px; }
.online-row > .big-btn { flex: 1; }
.join-wrap { flex: 1; display: flex; gap: 6px; }
.join-wrap .big-btn { flex: 1; margin-top: 10px; }
#join-code { width: 74px; margin-top: 10px; text-transform: uppercase; text-align: center; letter-spacing: 2px; }

#menu-status { min-height: 18px; margin-top: 8px; font-size: 13px; color: #7a1f1f; font-weight: bold; }
#controls-hint {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #4a3826;
  font-size: 11.5px; line-height: 1.8; color: #4a3826;
}
#menu-footer {
  margin-top: 14px; font-size: 13px; font-style: italic; color: #8a7a5a;
  text-shadow: 0 1px 2px #000;
}

@media (max-width: 720px) {
  #menu { justify-content: flex-start; padding: 12px 0; }
  #menu-card { width: calc(100vw - 20px); padding: 18px 14px; }
  #menu-card h1 { font-size: 25px; }
  .lobby-tabs { grid-template-columns: 1fr; }
  .lobby-body { grid-template-columns: 1fr; }
  .lobby-paperdoll { margin: 0 auto; }
  .lobby-panel { min-height: 0; }
  #character-roster, .character-details { grid-template-columns: 1fr; }
  #create-panel { padding-right: 4px; }
}

/* ---- levels, arts and the technique bar ---- */
.perk-card.stat { border-color: #8a6a1a; box-shadow: 0 0 14px 2px rgba(232,178,90,.45), 0 4px 14px rgba(0,0,0,.7); }
.perk-card.stat .perk-tag { color: #8a6a1a; }

#rogue-stats {
  margin-top: 4px;
  font: bold 11px Verdana, sans-serif;
  color: #e8c268; text-shadow: 0 1px 2px #000;
  letter-spacing: .4px;
}
#skill-points-hud {
  pointer-events: auto; margin-top: 5px; width: 100%; padding: 3px 5px;
  border: 1px solid #4a3826; border-radius: 3px; cursor: pointer;
  background: #5c4228; color: #f4ecd4; font: bold 9px Georgia, serif;
  letter-spacing: .5px;
}

#ability-bar {
  position: absolute; bottom: 64px; right: 14px;
  display: flex; flex-direction: column; gap: 4px; pointer-events: none;
}
.ab-cell {
  position: relative; overflow: hidden;
  font: 11px Georgia, serif; color: #e8e0d0;
  background: rgba(20, 16, 10, .82);
  border: 1px solid #4a3826; border-radius: 4px;
  padding: 3px 8px; white-space: nowrap;
}
.ab-cell b {
  background: #4a3826; color: #f4ecd4; border-radius: 3px;
  padding: 0 5px; margin-right: 4px; font: bold 10px Verdana, sans-serif;
}
.ab-cell em { color: #b0a890; font-style: italic; margin-left: 5px; font-size: 10px; }
.ab-cell.locked { opacity: .5; }
.ab-cell.on { border-color: #8fc9e8; box-shadow: 0 0 8px rgba(143,201,232,.6); }
.ab-cell i {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: #e8b45a; display: block;
}

.pool-card {
  width: 158px; padding: 7px 9px;
  background: rgba(255, 252, 240, .55);
  border: 1.5px solid #4a3826; border-radius: 5px;
  font: 11px Georgia, serif;
}
.pool-card.mine { cursor: pointer; }
.pool-card.mine:hover { background: #fff8e0; box-shadow: 0 0 10px rgba(232,178,90,.8); }
/* the Warden's two roads: the chosen one is lit, the other waits dimmed */
.pool-card.muster-dest { cursor: pointer; opacity: .55; }
.pool-card.muster-dest.mine { opacity: 1; background: #fff8e0; box-shadow: 0 0 0 2px #b8862e inset; }
.pool-card.claimed { opacity: .45; }
.pool-card.pass { border-style: dashed; cursor: pointer; }
.pool-card.pass:hover { background: #fff8e0; }
.pool-card .pc-name { font-weight: bold; font-size: 12px; margin-bottom: 2px; }
.pool-card .pc-line { line-height: 1.35; }
.pool-card .pc-line.ok { color: #2a6a2a; }
.pool-card .pc-line.bad { color: #9a2a1a; }
.pool-card .pc-line.claimedby { font-style: italic; color: #5a4a30; }
.pool-card .up { color: #2a6a2a; }
.pool-card .down { color: #9a2a1a; }

/* shield & relic paperdoll glyphs */
.pp-glyph { font-size: 26px; line-height: 1; text-align: center; filter: drop-shadow(0 1px 2px #000); }

/* ---- open Britannia: herald prompt + muster dialogue ---- */
#herald-prompt {
  position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%);
  font: 13px Georgia, serif; color: #f4ecd4;
  background: rgba(20, 16, 10, .85);
  border: 1.5px solid #e8c268; border-radius: 6px;
  padding: 6px 14px; pointer-events: none;
  box-shadow: 0 0 14px rgba(232, 178, 90, .35);
}
#herald-prompt b {
  background: #4a3826; color: #ffe9b0; border-radius: 3px;
  padding: 0 6px; margin-right: 5px; font: bold 12px Verdana, sans-serif;
}
#shop-prompt {
  position: absolute; bottom: 190px; left: 50%; transform: translateX(-50%);
  font: 12px Georgia, serif; color: #f4ecd4; text-align: center;
  background: rgba(16, 20, 12, .85);
  border: 1.5px solid #8fc9e8; border-radius: 6px;
  padding: 6px 14px; pointer-events: none;
  box-shadow: 0 0 14px rgba(120, 180, 220, .3);
}
#shop-prompt b { color: #bfe4ff; }
#muster-panel {
  pointer-events: auto; z-index: 8;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 460px; max-width: 92vw;
  background: linear-gradient(160deg, #ede0bc 0%, #d9c48f 60%, #cdb478 100%);
  border: 2px solid #4a3826; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.8), inset 0 0 0 1px #f4ecd4;
  padding: 12px 16px; color: #2b2013;
}
#muster-choices { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }

/* ---- Undercity commitment and payoff ---- */
#delve-landing, #delve-outcome {
  pointer-events: auto; z-index: 8;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 500px; max-width: 92vw;
  background: linear-gradient(160deg, #171d22 0%, #24231d 62%, #342818 100%);
  border: 2px solid #d7b45d; border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.9), inset 0 0 24px rgba(232,178,90,.08);
  padding: 14px 18px; color: #eee4ca;
  font: 13px Georgia, serif; line-height: 1.45;
}
#delve-landing .pool-title, #delve-outcome .pool-title {
  color: #ffd982; font: bold 17px Georgia, serif; text-align: center;
  letter-spacing: 1px; margin-bottom: 10px;
}
#delve-outcome-result { color: #ffce6b; margin-bottom: 8px; }
#delve-preview, #delve-outcome-ledger {
  border-top: 1px solid rgba(215,180,93,.4); padding-top: 8px; margin-top: 8px;
}
#delve-choice { text-align: center; margin-top: 12px; font-weight: bold; color: #bce9d7; }
#delve-choice b { color: #fff2bd; background: #4a3826; border-radius: 3px; padding: 2px 7px; }
#delve-outcome-actions { display: flex; gap: 8px; margin-top: 14px; }
#delve-outcome-actions button {
  flex: 1; padding: 10px;
  border: 1.5px solid #e8c268; border-radius: 5px;
  background: #5f421d; color: #fff2bd; cursor: pointer;
  font: bold 14px Georgia, serif; letter-spacing: 1px;
}
#delve-outcome-actions button:hover { background: #7a5729; box-shadow: 0 0 12px rgba(232,178,90,.45); }
#delve-close span { color: #d7b45d; font-size: 10px; }

/* ---- the chat line ---- */
#chat-entry {
  position: absolute; bottom: 118px; left: 16px;
  display: flex; gap: 8px; align-items: center;
  pointer-events: auto; z-index: 9;
  background: rgba(20, 16, 10, .9);
  border: 1.5px solid #4a3826; border-radius: 6px;
  padding: 6px 10px; font: 13px Georgia, serif; color: #e8c268;
}
#chat-field {
  width: 320px; background: rgba(0,0,0,.4); color: #f4ecd4;
  border: 1px solid #4a3826; border-radius: 4px;
  font: 13px Georgia, serif; padding: 4px 8px; outline: none;
}

/* ==========================================================================
   UO HUD (2026-09): the classic client's own gumps replace the parchment
   furniture. Everything here is a movable window; the playfield keeps the
   screen.
   ========================================================================== */
#self-status, #score { pointer-events: auto; cursor: move; user-select: none; }
.uo-window-active { z-index: 8 !important; }

/* ---- A. status mini-bar: gump 0x0803 with the real bar strips ---- */
#self-status {
  width: 200px; height: 78px; padding: 0; overflow: visible;
  background: url('assets/uo/gumps/02051-0x0803.png') 0 0 / 200px 78px no-repeat;
  border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.7)); color: #efe4bf;
}
#self-status > .bar {
  position: absolute; left: 44px; width: 142px; height: 14px; margin: 0;
  background: none; border: 0; border-radius: 0; overflow: hidden;
}
#self-status > .bar.hp { top: 15px; }
#self-status > .bar.mana { top: 32px; }
#self-status > .bar.stam { top: 49px; }
#self-status > .bar .fill { background-size: 142px 14px; background-repeat: no-repeat; image-rendering: pixelated; }
#self-status > .bar.hp .fill { background-image: url('assets/uo/gumps/02053-0x0805.png'); }
#self-status > .bar.mana .fill { background-image: url('assets/uo/gumps/02054-0x0806.png'); }
#self-status > .bar.stam .fill { background-image: url('assets/uo/gumps/02056-0x0808.png'); }
#self-status > .bar span { font: bold 9px/14px Verdana, sans-serif; letter-spacing: .2px; }
#self-details {
  display: none; position: absolute; left: 0; top: 100px; width: 214px;
  padding: 7px 9px; box-sizing: border-box; cursor: default;
  background: rgba(14, 11, 8, .88); border: 1px solid #8a7a50; border-radius: 3px;
  box-shadow: 0 3px 10px rgba(0,0,0,.7);
}
#self-status.expanded #self-details { display: block; }
#self-details #current-weapon { margin-top: 0; }
#ally-panel { top: 150px; }

/* ---- B. floor + objective: the rolled scroll 0x0820, one line ---- */
#score {
  top: 8px; left: 50%; right: auto; transform: translateX(-50%);
  width: 390px; height: 48px; padding: 0 44px 4px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: url('assets/uo/gumps/02080-0x0820.png') 0 0 / 390px 48px no-repeat;
  border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.65)); white-space: nowrap; text-align: left;
}
#score-text { display: inline; flex: 0 0 auto; font: bold 13px Georgia, serif; letter-spacing: .6px; }
#score #delve-objective {
  flex: 0 1 auto; min-width: 0; width: auto; max-width: none; margin: 0; padding: 0;
  border: 0; background: none; overflow: hidden;
}
#score #delve-objective span { display: none; }
#score #delve-objective strong {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: italic 12px Georgia, serif; letter-spacing: 0;
}
#score #delve-objective strong::before { content: '· '; font-style: normal; }
#score-details {
  display: none; position: absolute; left: 50%; top: 46px; transform: translateX(-50%);
  width: 342px; min-height: 91px; padding: 12px 22px 14px; box-sizing: border-box;
  background: url('assets/uo/gumps/02081-0x0821.png') 0 0 / 100% 100% no-repeat;
  white-space: normal; text-align: center; cursor: default;
  font: 12px/1.45 Georgia, serif; color: #2b2013;
}
#score.expanded #score-details { display: block; }
#score-details #round-text { margin: 0 0 3px; font-weight: bold; }
#score-objective-full { font-style: italic; }
#enemy-status { top: 14px; right: 14px; left: auto; transform: none; width: 190px; }
#boss-bar { top: 64px; }

/* ---- E. item details: a small dark UO tip at the cursor ---- */
#tooltip, #tooltip.ground-loot-tooltip {
  width: auto; min-width: 150px; max-width: 250px; padding: 6px 9px;
  background: rgba(8, 7, 6, .88); border: 1px solid #8a7a50; border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.75); color: #f2ead2; z-index: 1000;
}
#tooltip .tt-title { font-size: 13px; color: #fff; }
#tooltip .tt-title em { color: #9ec1ff; font-size: 11px; }
#tooltip .tt-sub, #tooltip .tt-hint, #tooltip .tt-ground-meta { color: #b9ab86; }
#tooltip .tt-sub { margin-bottom: 3px; font-size: 10.5px; }
#tooltip .tt-body { font-size: 11px; line-height: 1.35; margin-bottom: 4px; color: #ded5ba; }
#tooltip .tt-stat { font-size: 10.5px; border-bottom-color: rgba(255,255,255,.12); }
#tooltip .tt-stat span { color: #b9ab86; }
#tooltip .tt-better { color: #7be38f; }
#tooltip .tt-worse { color: #ff8b80; }
#tooltip .tt-equal { color: #d8c27a; }
#tooltip .tt-equipped { color: #9ec1ff; }
#tooltip .tt-hint { font-size: 9.5px; margin-top: 4px; }
/* the item's own picture at the head of its tip (public/js/item-tip.js) */
#tooltip .tt-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#tooltip .tt-item-id { min-width: 0; flex: 1 1 auto; }
#tooltip .tt-item { min-width: 180px; }
#tooltip .tt-item .tt-ground-meta { gap: 10px; }
#tooltip .tt-art {
  flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 3px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(90,78,52,.45) 0%, rgba(20,17,12,.2) 72%);
  border: 1px solid rgba(138,122,80,.6);
}
#tooltip .tt-art img { display: block; image-rendering: pixelated; max-width: 88px; max-height: 88px; }
#tooltip .tt-req-met { color: #7be38f; }
#tooltip .tt-req-unmet { color: #ff8b80; }
#tooltip, #tooltip.ground-loot-tooltip { max-width: min(250px, calc(100vw - 16px)); }
.item-tip-target { -webkit-touch-callout: none; }

/* ---- F. hotbar: four-fifths size, unlearned slots stay off the bar ---- */
#hotbar { transform: translateX(-50%) scale(.8); transform-origin: 50% 100%; bottom: 8px; }
#hotbar .slot.unknown { display: none; }

#skill-points-hud { width: auto; padding: 2px 9px; font-size: 10px; }
#paperdoll-panel { right: 372px; top: 96px; }

/* ---- corpses open the coffin gump 0x0009 (one gump per opened container) ---- */
.container-gump {
  width: 230px; height: 339px; padding: 0; overflow: visible; max-height: none;
  background: url('assets/uo/gumps/00009-0x0009.png') 0 0 / 230px 339px no-repeat;
  border: 0; border-radius: 0; box-shadow: none; cursor: move;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.72));
}
.container-gump .pp-title {
  position: absolute; left: -12px; right: -12px; top: -22px; margin: 0; text-align: center; white-space: nowrap;
  font: bold 12px Georgia, serif; color: #efe4bf; text-shadow: 0 1px 2px #000, 0 0 4px #000;
}
.container-gump .pp-title .cg-title { display: inline-block; max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.container-gump .pp-title .uo-close { float: none; margin-left: 6px; vertical-align: middle; }
.container-gump .cg-grid {
  position: absolute; left: 32px; top: 136px; width: 166px; height: 170px !important;
  min-height: 0; max-height: none; padding: 0; overflow: auto;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.container-gump .pp-cell { background: none; border-color: transparent; }
.container-gump .cg-loot-all { position: absolute; left: 50%; top: 344px; width: auto; margin: 0; transform: translateX(-50%); white-space: nowrap; }
.container-gump .pp-hint {
  position: absolute; left: -10px; right: -10px; top: 372px; margin: 0; padding: 3px 6px;
  background: rgba(14, 11, 8, .82); border: 1px solid #6b5a38; border-radius: 3px; color: #d9cba2;
  font: italic 10px Georgia, serif;
}
/* a UO-dark scrollbar where a crowded container must scroll — never the
   white browser default over the gump art */
.container-surface { scrollbar-width: thin; scrollbar-color: #6b4a2a rgba(14, 11, 8, .35); }
.container-surface::-webkit-scrollbar { width: 8px; height: 8px; }
.container-surface::-webkit-scrollbar-track { background: rgba(14, 11, 8, .35); border-radius: 4px; }
.container-surface::-webkit-scrollbar-thumb { background: #6b4a2a; border: 1px solid #2b2013; border-radius: 4px; }

/* closed scroll: a small tag — just "Floor 6". The objective lives in the unrolled sheet. */
#score { width: 170px; height: 21px; padding: 0 20px 2px; background-size: 170px 21px; top: 6px; }
#score-text { font-size: 10.5px; letter-spacing: .4px; }
#score:not(.expanded) #delve-objective { display: none; }
#score.expanded #delve-objective { display: none; }
#score-details { top: 21px; }
#boss-bar { top: 36px; }

/* ---- UO client scale: gumps at their native pixel size ---- */
.delve-hud #score { min-width: 0; }
#self-status {
  width: 154px; height: 60px; background-size: 154px 60px; image-rendering: pixelated;
}
#self-status.status-closed { display: none; }
#self-status > .bar { left: 34px; width: 109px; height: 11px; }
#self-status > .bar.hp { top: 12px; }
#self-status > .bar.mana { top: 25px; }
#self-status > .bar.stam { top: 38px; }
#self-status > .bar .fill { background-size: 109px 11px; }
#self-status > .bar span { font: bold 8px/11px Verdana, sans-serif; opacity: 0; transition: opacity 120ms; }
#self-status:hover > .bar span { opacity: 1; }
#self-details { top: 78px; }
#self-services {
  position: absolute; left: 16px; top: 78px; z-index: 2;
  color: #e8b8c8; font: 10px/1.3 Verdana, sans-serif; letter-spacing: .5px;
  text-shadow: 0 1px 2px #000;
}
#ally-panel { top: 120px; }

/* a pulled health bar: gump 0x0804, one line */
.uo-healthbar {
  position: absolute; width: 154px; height: 60px; z-index: 6; pointer-events: auto; cursor: move;
  background: url('assets/uo/gumps/02052-0x0804.png') 0 0 / 154px 60px no-repeat;
  image-rendering: pixelated; user-select: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.7));
}
.uo-healthbar .hb-name {
  position: absolute; left: 16px; top: 11px; width: 122px; height: 16px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; text-align: center;
  font: bold 10px/16px Georgia, serif; color: #2a1f12;
}
.uo-healthbar .hb-track { position: absolute; left: 34px; top: 38px; width: 109px; height: 11px; overflow: hidden; }
.uo-healthbar .hb-fill {
  height: 100%; width: 100%; transition: width 90ms linear;
  background: url('assets/uo/gumps/02053-0x0805.png') 0 0 / 109px 11px no-repeat;
}
.uo-healthbar.hb-poisoned .hb-fill { background-image: url('assets/uo/gumps/02056-0x0808.png'); }
.uo-healthbar.hb-locked { filter: drop-shadow(0 0 3px #ff5a3c) drop-shadow(0 3px 5px rgba(0,0,0,.7)); }
.uo-healthbar.hb-locked .hb-name { color: #a8200c; }
.uo-healthbar.hb-gone { filter: grayscale(1) brightness(.7) drop-shadow(0 3px 5px rgba(0,0,0,.7)); }

/* paperdoll strip gains STATUS above SKILLS/BOOKS */
#pp-status {
  position: absolute; right: 0; top: 25px; width: 64px; height: 20px;
  border: 1px solid #80715c; background: #302b24; color: #e8dfcb;
  font: bold 9px Georgia, serif; cursor: pointer;
}
#pp-skills { top: 48px; }
#pp-books { top: 71px; }

/* ---- opened containers wear their own UO gump ---- */
/* The chest's lower box alone held two rows (the third was clipped under a
   white scrollbar); the item area now starts at the lid's lower edge and
   holds three full rows, so a nine-piece kit sits in view. */
.container-gump.gump-chest {
  width: 252px; height: 336px;
  background: url('assets/uo/gumps/00073-0x0049.png') 0 0 / 252px 336px no-repeat;
}
.container-gump.gump-chest .cg-grid { left: 26px; top: 112px; width: 200px; height: 138px !important; }
.container-gump.gump-chest .cg-loot-all { top: 340px; }
.container-gump.gump-chest .pp-hint { top: 368px; }
.container-gump.gump-barrel {
  width: 244px; height: 294px;
  background: url('assets/uo/gumps/00062-0x003E.png') 0 0 / 244px 294px no-repeat;
}
.container-gump.gump-barrel .cg-grid { left: 46px; top: 80px; width: 152px; height: 150px !important; }
.container-gump.gump-barrel .cg-loot-all { top: 298px; }
.container-gump.gump-barrel .pp-hint { top: 326px; }
/* THE ECONOMY (R3-32): a crate opens in the wooden-crate gump 0x0044 (190x140, at 1.4x) */
.container-gump.gump-crate {
  width: 266px; height: 196px;
  background: url('assets/uo/gumps/00068-0x0044.png') 0 0 / 266px 196px no-repeat;
}
.container-gump.gump-crate .cg-grid { left: 34px; top: 28px; width: 198px; height: 128px !important; }
.container-gump.gump-crate .cg-loot-all { top: 200px; }
.container-gump.gump-crate .pp-hint { top: 228px; }
.container-gump.gump-urn {
  width: 246px; height: 272px;
  background: url('assets/uo/gumps/00061-0x003D.png') 0 0 / 246px 272px no-repeat;
}
.container-gump.gump-urn .cg-grid { left: 42px; top: 84px; width: 160px; height: 132px !important; }
.container-gump.gump-urn .cg-loot-all { top: 276px; }
.container-gump.gump-urn .pp-hint { top: 304px; }

/* demo debug tools */
#debug-tools {
  position: absolute; left: 14px; bottom: 14px; z-index: 7; pointer-events: auto;
  display: flex; align-items: center; gap: 5px; padding: 4px 6px;
  background: rgba(14, 11, 8, .85); border: 1px dashed #b08a3a; border-radius: 3px;
}
#debug-tools.hidden { display: none; }
#debug-tools span { color: #e0b64f; font: bold 9px Verdana, sans-serif; letter-spacing: 1px; }
#debug-tools button {
  border: 1px solid #8a7a50; background: #3a2d1c; color: #f2ead2; cursor: pointer;
  font: bold 9px Georgia, serif; padding: 3px 7px;
}
#debug-tools button:hover { background: #5c4228; }

/* The doll holds its weapon on the VIEWER'S LEFT and its shield on the right;
   the grab areas were seated the other way round, so unequipping a mace meant
   grabbing empty black beside the shield. */
#paperdoll-panel #pp-weapon { left: 19px; top: 60px; width: 56px; height: 150px; }
#paperdoll-panel #pp-offhand, #paperdoll-panel #pp-shield { left: 122px; top: 76px; width: 56px; height: 124px; }

#debug-tools #debug-fps { color: #bfe3a0; font: 9px Verdana, sans-serif; letter-spacing: 0; min-width: 118px; }

/* UO has no hover boxes: an item is just its art until it is picked up */
.container-gump .pp-cell:hover { background: none; border-color: transparent; filter: brightness(1.25); }
.pp-cell.dragging { opacity: .25; }

/* THE BAR IS EDITABLE: an empty seat is a small socket, never hidden — it is
   where the next spell goes. Drag any spell or technique from a book (O) onto
   any seat, drag seat to seat to reorder, drag off the bar to unbind. While a
   book is open or something is being dragged, every seat stands up full size. */
#hotbar .slot.unknown { display: block; }
#hotbar .slot.empty-seat {
  width: 22px; flex-basis: 22px; height: 46px; opacity: .78; filter: none;
  background: rgba(14, 11, 8, .78); border: 1px dashed #d8b46a;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 2px 5px rgba(0,0,0,.55);
  transition: width 120ms, flex-basis 120ms, opacity 120ms;
}
#hotbar .slot.empty-seat::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #cdb478; font: bold 13px Georgia, serif; filter: none; }
#hotbar .slot.empty-seat .key { display: none; }
body.bar-editing #hotbar .slot.empty-seat, #hotbar .slot.empty-seat.drop-ready {
  width: 46px; flex-basis: 46px; opacity: .95; border-style: solid; border-color: #e4bd72;
}
body.bar-editing #hotbar .slot.empty-seat .key { display: block; }
body.bar-editing #hotbar { transform: translateX(-50%) scale(1); }

#ally-panel { pointer-events: auto; }
#party-orders { display: flex; gap: 4px; margin-top: 5px; }
#party-orders button {
  flex: 1; border: 1px solid #4a3826; background: #5c4228; color: #f4ecd4; cursor: pointer;
  font: bold 9px Georgia, serif; padding: 2px 0; border-radius: 3px;
}
#party-orders button.active { background: #2f5a2a; border-color: #9fd98a; }

/* ==========================================================================
   WP-C (2026-09-23): cursor, war mode, journal gump, options, amount gump.
   ========================================================================== */

/* The UO cursor (public/js/cursor.js): the client's gauntlet art, set as two
   CSS variables on <html>. Every gump and HUD panel shows the gump pointer
   (no per-control hands or move arrows: the client has none); the playfield
   shows the world cursor (8-way arrow, pinch, palm, crosshair, fist). Text
   fields keep the I-beam. */
body.uo-cursors, body.uo-cursors * { cursor: var(--uo-cursor, default) !important; }
body.uo-cursors #game { cursor: var(--uo-world-cursor, var(--uo-cursor, default)) !important; }
body.uo-cursors textarea,
body.uo-cursors input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]) {
  cursor: text !important;
}
#war-indicator {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 4;
  padding: 3px 12px; pointer-events: none;
  color: #ffe0d8; background: rgba(90, 14, 10, .88); border: 1px solid #ff6a52; border-radius: 3px;
  box-shadow: 0 0 10px rgba(255, 70, 40, .55), inset 0 0 0 1px rgba(255,255,255,.12);
  font: bold 11px Georgia, serif; letter-spacing: 2px; text-shadow: 0 1px 2px #000;
}

/* bottom-left stack: window buttons, then (dev) debug tools, then the journal */
#hud-buttons {
  position: absolute; left: 14px; bottom: 10px; z-index: 7; pointer-events: auto;
  display: flex; gap: 4px;
}
#hud-buttons button {
  padding: 3px 8px; cursor: pointer;
  border: 1px solid #8a7a50; background: rgba(28, 21, 13, .88); color: #f2ead2;
  font: bold 9px Georgia, serif; letter-spacing: .6px;
}
#hud-buttons button span { margin-left: 4px; color: #d8b46a; font: bold 8px Verdana, sans-serif; }
#hud-buttons button:hover { background: #5c4228; }
#hud-buttons button.drag-over { background: #6b4f24; box-shadow: 0 0 10px rgba(255,218,117,.6); }
#feedback-panel {
  left: 50%; top: 50%; width: min(430px, calc(100vw - 28px)); padding: 14px 16px;
  transform: translate(-50%, -50%); z-index: 20;
  background: transparent; border-width: 14px; border-style: solid; border-color: transparent;
  border-image: url('assets/uo/gumps/nine-0A28.png') 44 fill / 44px repeat;
}
#feedback-panel label { display: block; margin: 4px 0 5px; font-size: 13px; }
#feedback-text {
  display: block; width: 100%; min-height: 132px; resize: vertical; padding: 8px;
  color: #23190e; background: #f3e5bd; border: 2px inset #8b744d;
  font: 14px/1.35 Georgia, serif;
}
#feedback-count { margin-top: 3px; color: #6b5638; text-align: right; font: 10px Verdana, sans-serif; }
#feedback-status { min-height: 18px; margin-top: 2px; color: #7a1f1f; font: bold 12px/1.35 Georgia, serif; }
.feedback-actions { display: grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap: 6px; margin-top: 5px; }
#feedback-talk.listening { color: #f4ecd4; background: #7a1f1f; }
#feedback-panel .pp-hint { margin-top: 9px; color: #6b5638; font-style: italic; }
#debug-tools { bottom: 38px; }
#debug-tools:not(.hidden) ~ #journal { bottom: 74px; }

/* the music tag rises above the delve controls help while that is shown */
body.controls-hint-open #now-playing { bottom: 140px; }

/* ---- the JOURNAL gump: scrollback of the session ---- */
#journal-panel {
  left: 14px; top: 170px; width: 420px; height: 300px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; padding: 8px 10px; z-index: 7;
  background: linear-gradient(160deg, rgba(38, 30, 20, .95), rgba(22, 17, 11, .95));
  border: 1px solid #8a7a50; color: #e8dfcb;
}
#journal-panel.hidden { display: none; }
#journal-panel .pp-title { color: #efe4bf; margin-bottom: 5px; }
#journal-log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px; cursor: default;
  background: rgba(8, 7, 6, .55); border: 1px solid #4a3826; border-radius: 2px;
  font: 12px/1.45 Verdana, sans-serif; text-shadow: 0 1px 1px #000; user-select: text; -webkit-user-select: text;
  scrollbar-width: thin; scrollbar-color: #6b4a2a rgba(14, 11, 8, .35);
}
#journal-log::-webkit-scrollbar { width: 8px; }
#journal-log::-webkit-scrollbar-thumb { background: #6b4a2a; border-radius: 4px; }
.journal-row { display: flex; gap: 7px; }
.journal-time { flex: 0 0 auto; color: #8f8466; font-size: 10px; line-height: 17px; }
#journal-panel .pp-hint { margin-top: 5px; font: italic 10px Georgia, serif; color: #b9ab86; text-align: center; }

/* ---- OPTIONS gump ---- */
#options-panel {
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: 330px; z-index: 9;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
#options-panel .opt-section { margin: 6px 0 9px; padding-top: 6px; border-top: 1px solid rgba(74,56,38,.35); }
#options-panel h3, #options-panel summary { font: bold 12px Georgia, serif; letter-spacing: 1px; margin-bottom: 5px; cursor: pointer; }
#options-panel h3 { cursor: default; }
.opt-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; margin: 3px 0; font: 12px Georgia, serif; }
.opt-row input[type="range"] { width: 100%; accent-color: #6f261e; }
.opt-check { display: flex; align-items: center; gap: 6px; margin: 4px 0; font: 12px Georgia, serif; cursor: pointer; }
.opt-toggle { display: flex; gap: 4px; }
.opt-toggle button, #opt-reset-layout, .opt-actions button, .amount-actions button {
  padding: 4px 9px; cursor: pointer; border: 1px solid #4a3826; border-radius: 3px;
  background: rgba(244,236,212,.45); color: #2b2013; font: bold 10px Georgia, serif; letter-spacing: .6px;
}
.opt-toggle button.sel { background: #302b24; color: #f4e6bd; box-shadow: inset 0 -2px 0 #d8b046; }
#opt-reset-layout { margin-top: 6px; }
#opt-zoom-note { display: block; font: italic 10px Georgia, serif; opacity: .75; }
#opt-zoom-note:empty { display: none; }
#opt-keys { display: grid; gap: 2px; margin-top: 4px; font: 11px Georgia, serif; }
#opt-keys div { display: grid; grid-template-columns: 128px 1fr; gap: 6px; }
#opt-keys kbd {
  font: bold 10px Verdana, sans-serif; color: #f4ecd4; background: #4a3826; border-radius: 2px;
  padding: 1px 4px; justify-self: start;
}
.opt-actions { display: flex; gap: 6px; justify-content: space-between; margin-top: 8px; }
.opt-actions button { flex: 1; background: #5c4228; color: #f4ecd4; }
#opt-logout { background: #6f261e; }

/* ---- the amount gump ---- */
#amount-panel { width: 200px; z-index: 12; padding: 8px 10px; }
/* raised (uo-window-active is z 8) it must stay over the gump it asks for: the bank box is z 8 too and later in the page, so it took OK's click */
#amount-panel.uo-window-active { z-index: 12 !important; }
#amount-panel .pp-title { margin-bottom: 6px; }
.amount-row { display: flex; align-items: center; gap: 6px; }
#amount-field { width: 90px; padding: 3px 5px; font: bold 13px Verdana, sans-serif; border: 1px solid #4a3826; background: #f4ecd4; color: #2b2013; }
#amount-max { font: 11px Georgia, serif; }
#amount-range { width: 100%; margin: 7px 0 5px; accent-color: #6f261e; }
.amount-actions { display: flex; gap: 6px; }
.amount-actions button { flex: 1; }
#amount-ok { background: #5c4228; color: #f4ecd4; }
#amount-panel .pp-hint { margin-top: 5px; font: italic 10px Georgia, serif; text-align: center; opacity: .8; }

/* ---- paperdoll: OPTIONS / JOURNAL up the right column, the bag bottom-left ---- */
#pp-options, #pp-journal {
  position: absolute; right: 0; width: 64px; height: 20px;
  border: 1px solid #80715c; background: #302b24; color: #e8dfcb;
  font: bold 9px Georgia, serif; cursor: pointer;
}
#pp-options { top: -192px; }
#pp-journal { top: -169px; }
#pp-backpack {
  position: absolute; left: 10px; top: 228px; z-index: 6; width: 36px; height: 36px; padding: 0;
  border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 1px 2px #000);
}
#pp-backpack img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
#pp-backpack:hover, #pp-backpack.drag-over { filter: drop-shadow(0 0 6px #ffd98a) brightness(1.2); }

/* bag art reads brighter and bigger (ui.js scales it up to 2x) */
.container-gump .pp-cell img, #bank-vault-grid .pp-cell img {
  image-rendering: pixelated; filter: brightness(1.18) drop-shadow(0 0 1px rgba(255, 238, 200, .55));
}
.lobby-panel.lobby-nudge { animation: lobby-nudge 0.9s ease-out; }
@keyframes lobby-nudge {
  0% { box-shadow: 0 0 0 0 rgba(216,176,70,.0); }
  25% { box-shadow: 0 0 0 4px rgba(216,176,70,.75); }
  100% { box-shadow: 0 0 0 0 rgba(216,176,70,0); }
}

/* The paperdoll's button column climbs the right side above PEACE, as in the
   client (OPTIONS, JOURNAL, SKILLS, BOOKS, STATUS), so nothing sits on the
   name plate any more and a long title is no longer cut off under STATUS. */
#pp-options { top: -192px; }
#pp-journal { top: -169px; }
#pp-skills { top: -146px; }
#pp-books { top: -123px; }
#pp-status { top: -100px; }

/* ---- the new arts: rank ladder in tips, the thrown weapon's marker ---- */
#tooltip .tt-rank { font-size: 10px; line-height: 1.3; color: #8f8466; margin-top: 2px; }
#tooltip .tt-rank b { display: inline-block; min-width: 20px; color: #8f8466; font: bold 9px Georgia, serif; }
#tooltip .tt-rank.have, #tooltip .tt-rank.have b { color: #d8c27a; }
#hurl-marker {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: translate(-50%, -100%);
  color: #e8d7a8; font: bold 9px Georgia, serif; letter-spacing: .5px; white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
#hurl-marker .hurl-arrow {
  order: 2; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #d8b46a;
  filter: drop-shadow(0 1px 1px #000); transform: rotate(var(--hurl-angle, 90deg));
}
#hurl-marker.offscreen { transform: translate(-50%, -50%); }
#hurl-marker.offscreen span { padding: 1px 4px; background: rgba(14, 11, 8, .72); border: 1px solid #6a5a38; }

/* the lobby sheet: best skills, one per line, never broken mid-name */
#detail-skills .best-skill { display: block; white-space: nowrap; }


/* arts vs skills: the two books say what they are, and how they link */
.sg-subtitle { margin: 0 0 2px; text-align: center; font: italic 10.5px/13px Georgia, serif; color: #5a3a1c; }
.abilitybook-subtitle { position: absolute; z-index: 3; left: 70px; top: 17px; width: 270px; color: #74583d; font: italic 8.5px Georgia, serif; text-align: center; pointer-events: none; }
#tooltip .tt-link { margin: 0 0 5px; font-size: 10.5px; color: #e9d59a; }
#tooltip .tt-muted { color: #9a8e70; font-style: italic; }

/* ---- the backpack: the UO bag gump 0x003C (Options: Pack · the default) ----
   Everything is laid out in the gump's own pixels times --pack-scale (1, 1.5
   or 2; ui.js sets it). Items lie loose at their native art: no cell boxes,
   no badges. A stack's amount is a small outlined number; a new find winks
   like a find on the ground; the brass clasp is the tidy button. */
#pack-panel {
  --pack-scale: 1.5;
  right: 14px; top: 96px; padding: 0; overflow: visible; max-height: none;
  width: calc(230px * var(--pack-scale)); height: calc(204px * var(--pack-scale));
  background: url('assets/uo/gumps/00060-0x003C.png') 0 0 / 100% 100% no-repeat;
  border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.72));
}
#pack-panel[data-scale="2"] { image-rendering: pixelated; }
#pack-panel .pp-title {
  position: absolute; right: calc(25px * var(--pack-scale)); top: calc(27px * var(--pack-scale)); margin: 0; font-size: 0;
}
#pack-panel .pp-title .pp-key { display: none; }
#pack-flap {
  position: absolute; left: calc(40px * var(--pack-scale)); top: calc(2px * var(--pack-scale));
  width: calc(150px * var(--pack-scale)); height: calc(44px * var(--pack-scale));
}
#pack-panel #pp-grid {
  position: absolute; left: calc(34px * var(--pack-scale)); top: calc(48px * var(--pack-scale));
  width: calc(164px * var(--pack-scale)); height: calc(114px * var(--pack-scale)) !important;
  min-height: 0; padding: 0; overflow: visible;
  background: none; border: 0; border-radius: 8px; box-shadow: none;
}
#pack-panel #pp-grid.drag-over { box-shadow: inset 0 0 16px rgba(255,218,117,.22); }
.pack-item {
  position: absolute; transform: translate(-50%, -50%); cursor: grab; line-height: 0;
}
.pack-item img { display: block; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.pack-item:hover img { filter: brightness(1.28) drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.pack-item.dragging { opacity: .25; }
/* the client's amount: small, pale, outlined; never a badge */
.pack-amount {
  position: absolute; right: -4px; bottom: -3px; pointer-events: none; white-space: nowrap;
  font: bold calc(6px + 2px * var(--pack-scale)) / 1 Verdana, Tahoma, sans-serif; color: #efe6cc; letter-spacing: 0;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000;
}
/* uncommon and better: the faint ring they have on the ground */
.pack-item.rare::before {
  content: ''; position: absolute; z-index: -1; left: 50%; bottom: -6%; width: 100%; height: 36%;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rarity, #8fc97f) 26%, transparent), transparent);
}
/* a new find: the ground glint's four-point wink, and a gentle lift of the art */
.pack-glint {
  position: absolute; right: 8%; top: 12%; pointer-events: none; opacity: 0;
  width: calc(7px * var(--pack-scale)); height: calc(7px * var(--pack-scale));
  animation: pack-glint 1.8s ease-in-out infinite; animation-delay: var(--glint-phase, 0s);
}
.pack-glint::before, .pack-glint::after { content: ''; position: absolute; background: #fff4d0; box-shadow: 0 0 2px rgba(255,236,190,.8); }
.pack-glint::before { left: 0; right: 0; top: calc(50% - .5px * var(--pack-scale)); height: calc(1px * var(--pack-scale)); }
.pack-glint::after { top: 0; bottom: 0; left: calc(50% - .5px * var(--pack-scale)); width: calc(1px * var(--pack-scale)); }
.pack-item.glint img { animation: pack-lift 1.8s ease-in-out infinite; animation-delay: var(--glint-phase, 0s); }
@keyframes pack-glint {
  0%, 55%, 100% { opacity: 0; transform: scale(.2); }
  70% { opacity: 1; transform: scale(1); }
  85% { opacity: .35; transform: scale(.55); }
}
@keyframes pack-lift {
  0%, 50%, 100% { filter: brightness(1) drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
  70% { filter: brightness(1.32) drop-shadow(0 0 2px rgba(255,236,190,.55)); }
}
/* the brass clasp tidies; its menu is the dark tooltip's */
#pack-sort {
  position: absolute; padding: 0; border: 0; border-radius: 3px; background: transparent; cursor: pointer;
  left: calc(104px * var(--pack-scale)); top: calc(161px * var(--pack-scale));
  width: calc(20px * var(--pack-scale)); height: calc(19px * var(--pack-scale));
}
#pack-sort:hover, #pack-sort:focus-visible { outline: none; background: radial-gradient(closest-side, rgba(255,226,150,.38), transparent); }
#pack-sort-menu {
  position: absolute; z-index: 5; display: flex; flex-direction: column; min-width: 132px; padding: 3px;
  left: calc(114px * var(--pack-scale)); top: calc(182px * var(--pack-scale)); transform: translateX(-50%);
  background: rgba(14, 11, 8, .95); border: 1px solid #6b5a38; box-shadow: 0 3px 10px rgba(0,0,0,.75); cursor: default;
}
#pack-sort-menu.hidden { display: none; }
#pack-sort-menu button {
  padding: 3px 9px 3px 16px; border: 0; background: none; color: #ded5ba; cursor: pointer;
  font: 11px Georgia, serif; text-align: left; position: relative;
}
#pack-sort-menu button:hover { background: rgba(216,176,70,.16); color: #fff3cf; }
#pack-sort-menu button.sel { color: #e0c070; }
#pack-sort-menu button.sel::before { content: '•'; position: absolute; left: 6px; }

/* ---- Options · Pack: Grid, ClassicUO's grid container ----
   A dark translucent gump with a hairline UO border, square slots (the empty
   ones too), each item's art centred with its amount in small type; uncommon
   and better tint their slot's edge. */
#pack-panel.pack-grid-mode {
  --pack-cell: calc(40px * var(--pack-scale) + 4px);
  width: auto; height: auto; padding: 21px 5px 5px; image-rendering: auto;
  background: rgba(10, 9, 7, .82); border: 1px solid #6b5a38; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,230,170,.06), 0 4px 12px rgba(0,0,0,.55);
  filter: none;
}
#pack-panel.pack-grid-mode .pp-title {
  left: 6px; right: 4px; top: 2px; height: 17px;
  font: bold 11px/17px Georgia, serif; color: #d8c38a; text-shadow: 0 1px 1px #000; letter-spacing: .3px;
}
#pack-panel.pack-grid-mode .pp-title .uo-close {
  width: 15px; height: 15px; margin-top: 1px; font: bold 11px/12px Georgia, serif;
  background: rgba(60,44,28,.9); border-color: #6b5a38; color: #e8dfcb;
}
#pack-panel.pack-grid-mode #pack-flap { display: none; }
#pack-panel.pack-grid-mode.pack-full .pp-title { color: #e08a6a; }
#pack-panel.pack-grid-mode #pp-grid {
  position: static; display: grid; gap: 2px; width: auto; height: auto !important; border-radius: 0;
  grid-template-columns: repeat(var(--pack-cols, 6), var(--pack-cell)); grid-auto-rows: var(--pack-cell);
  max-height: min(calc(var(--pack-cell) * 7 + 12px), calc(100vh - 170px)); overflow-x: hidden; overflow-y: auto; padding-right: 1px;
}
#pack-panel.pack-grid-mode #pp-grid.drag-over { box-shadow: none; outline: 1px solid #c9a860; }
.pack-slot {
  position: relative; box-sizing: border-box;
  background: rgba(255, 240, 200, .035); border: 1px solid rgba(150, 128, 88, .32);
}
.pack-slot.empty { background: rgba(255, 240, 200, .015); border-color: rgba(150, 128, 88, .16); }
.pack-slot:not(.empty):hover { border-color: #c9a860; background: rgba(255, 240, 200, .07); }
.pack-grid-mode .pack-item {
  position: absolute; inset: 0; transform: none; display: flex; align-items: center; justify-content: center;
}
.pack-grid-mode .pack-item.rare { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity) 50%, transparent); }
.pack-grid-mode .pack-item.rare::before { display: none; }
.pack-grid-mode .pack-amount { right: 3px; bottom: 2px; }
.pack-grid-mode .pack-glint { right: 12%; top: 14%; }
#pack-panel.pack-grid-mode #pack-sort {
  left: auto; right: 24px; top: 3px; width: 15px; height: 15px; border-radius: 2px;
  color: #d8c38a; font: bold 11px/15px Georgia, serif; text-align: center;
}
#pack-panel.pack-grid-mode #pack-sort::before { content: '\2195'; }
#pack-panel.pack-grid-mode #pack-sort-menu { left: auto; right: 20px; top: 20px; transform: none; }
#pack-panel:not(.pack-grid-mode) #pp-grid.scrolls {
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #9a7440 rgba(0,0,0,.28);
}
#pack-panel:not(.pack-grid-mode) #pp-grid.scrolls::after {
  content: ''; position: absolute; left: 0; width: 1px; height: 1px; top: var(--bag-rows-h, 0);
}

/* ---- npc-killing: the warning before a blow on an innocent ---- */
.innocent-gump {
  left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 340px; max-width: calc(100vw - 32px); box-sizing: border-box; z-index: 9;
  border-color: #6b1f14;
}
.innocent-gump .pp-title { color: #6b1f14; }
.innocent-gump .ig-text { font: 13px/1.45 Georgia, serif; margin: 4px 0 10px; }
.innocent-gump .ig-ask { display: block; font: italic 12px Georgia, serif; margin-bottom: 10px; cursor: pointer; }
.innocent-gump .ig-row { display: flex; gap: 10px; justify-content: center; }
.innocent-gump .ig-btn {
  min-width: 84px; padding: 5px 12px; border: 1.5px solid #4a3826; border-radius: 3px;
  font: bold 13px Georgia, serif; cursor: pointer; color: #f4ecd4; background: #5c4228;
}
.innocent-gump .ig-yes { background: #7a2418; }
.innocent-gump .ig-btn:hover { filter: brightness(1.2); }

/* ---- item drag and drop (item-drag.js): the item itself rides the cursor ---- */
.drag-ride {
  position: fixed; left: 0; top: 0; z-index: 100000; pointer-events: none;
  image-rendering: pixelated; will-change: transform;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
/* over the ground it hangs above its landing spot */
body.drag-over-ground .drag-ride { filter: drop-shadow(0 7px 3px rgba(0, 0, 0, .42)); }
/* the doll picks by pixels (ui.js wireDoll): its seats never take a press */
#pp-doll .pp-slot { pointer-events: none !important; }
#pp-doll.drag-over { border-color: transparent; box-shadow: none; }
#paperdoll-panel .pp-slot.drop-slot {
  border-radius: 8px;
  box-shadow: inset 0 0 14px rgba(255, 218, 117, .38), 0 0 7px rgba(255, 210, 90, .32);
}
.container-surface.drag-over {
  box-shadow: inset 0 0 16px rgba(0, 0, 0, .58), inset 0 0 0 1px rgba(255, 218, 117, .45), inset 0 0 20px rgba(255, 218, 117, .2);
}
/* picked up means gone from where it lay (it snaps back there if refused) */
.pp-cell.dragging, .pack-item.dragging { opacity: 0; }

/* ---- another body's paperdoll (ui.js openOtherPaperdoll): read-only, same frame ---- */
#other-paperdoll-panel {
  left: 36%; top: 150px; width: 262px; height: 324px; max-height: none;
  box-sizing: border-box; padding: 0; border: 0; border-radius: 0;
  background: url('assets/uo/paperdoll/02000-0x07D0.png') 0 0 / 262px 324px no-repeat;
  box-shadow: none; filter: drop-shadow(0 5px 8px rgba(0,0,0,.72));
  color: #17140f; overflow: visible; cursor: move;
}
#other-paperdoll-panel > .uo-close {
  position: absolute; right: 7px; top: 7px; z-index: 12;
  border-color: #80715c; background: #302b24; color: #e8dfcb;
  box-shadow: inset 0 0 0 1px #17140f;
}
#opd-portrait {
  position: absolute; left: 9px; top: 20px; width: 260px; height: 237px;
  display: block; margin: 0; image-rendering: pixelated; cursor: default;
}
#opd-name {
  position: absolute; left: 25px; top: 266px; width: 196px; height: 20px; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font: bold 14px Georgia, serif; line-height: 1; text-align: center;
  color: #17140f; text-shadow: 0 1px rgba(229,211,166,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
/* FOLK TIERS: a townsperson's bearing, a parchment slip under the doll (ui.js drawOtherDoll) */
#opd-bearing {
  position: absolute; left: 14px; top: calc(100% - 6px); width: 234px; z-index: 5; box-sizing: border-box;
  padding: 6px 9px 7px; cursor: default; pointer-events: none;
  background: #e2d3a8; border: 1px solid #6b5230; box-shadow: 0 3px 8px rgba(0,0,0,.6), inset 0 0 10px rgba(107,82,48,.35);
  font: italic 12px/1.3 Georgia, serif; color: #2a1e10; text-align: center;
}
/* A quiet bond caption; the belongings live in a separate classic backpack. */
#opd-pack { position:absolute; right:18px; top:226px; font:bold 11px Georgia,serif; color:#302618; background:#b5a27d; border:1px solid #65583e; cursor:pointer; }
#opd-skill { position:absolute; left:25px; top:286px; width:196px; text-align:center; font:11px Georgia,serif; }
#opd-bond { position:absolute; top:324px; left:12px; width:238px; padding:4px; text-align:center; font:12px Georgia,serif; color:#e1d2ad; background:#292318; border:1px solid #756342; }
#companion-pack { left:60%; top:160px; width:345px; height:306px; padding:0; border:0; box-shadow:none; overflow:visible;
  background:url('assets/uo/gumps/00060-0x003C.png') 0 0 / 100% 100% no-repeat; filter:drop-shadow(0 5px 8px #000b); }
#companion-pack .uo-close { position:absolute; right:35px; top:32px; }
.cp-name { position:absolute; left:40px; top:13px; width:250px; text-align:center; color:#ead7ab; font:bold 12px Georgia,serif; text-shadow:1px 1px #000; }
.cp-items { position:absolute; left:51px; top:72px; width:246px; height:174px; overflow-y:auto; display:grid; grid-template-columns:repeat(5,46px); grid-auto-rows:52px; align-content:start; }
.cp-item { position:relative; border:0; background:transparent; padding:2px; cursor:pointer; }
.cp-item img { max-width:40px; max-height:44px; image-rendering:pixelated; pointer-events:none; }
.cp-item span { position:absolute; bottom:0; right:0; color:#fff1c9; font:11px Georgia,serif; text-shadow:1px 1px #000,-1px -1px #000; pointer-events:none; }
.cp-item:hover, .cp-item:focus-visible { filter:brightness(1.3); outline:1px dotted #ccb988; }
.cp-hint { position:absolute; left:22px; bottom:10px; width:300px; text-align:center; font:italic 12px Georgia,serif; color:#eedcbb; text-shadow:1px 1px #000; }
@media(max-width:700px) { #companion-pack { left:calc(50% - 172px); top:220px; } }
/* THE LAST PORTER — the lobby's campaign strip and the recap's three lines */
.campaign-strip { margin-top: 10px; padding: 8px 10px; border: 1px solid #6b5230; background: rgba(40, 28, 12, 0.08); }
.campaign-title { font-weight: bold; letter-spacing: 1px; color: #4a2f10; margin-bottom: 6px; }
.campaign-title span { font-weight: normal; letter-spacing: 0; color: #6b5230; font-size: 12px; }
.campaign-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.campaign-row .big-btn { width: auto; padding: 8px 14px; }
.campaign-lobby-hint { flex: 1 1 220px; font: italic 12px/1.35 Georgia, serif; color: #5a4020; }
#delve-outcome-campaign { margin-top: 8px; }
/* THE SESSION RECAP (GAME_DESIGN §4.4) */
#delve-outcome-session { border-top: 1px solid rgba(215,180,93,.4); padding-top: 8px; margin-top: 8px; }
#delve-outcome-session .session-have { color: #fff2bd; margin-bottom: 6px; font-style: italic; }
#delve-outcome-session .session-skill { display: block; margin: 2px 0; font-size: 14px; color: #eee4ca; }
#delve-outcome-session .session-skill b { color: #f4ecd4; font-weight: normal; }
#delve-outcome-session .session-skill em { color: #ffd24a; font-style: normal; }
#delve-outcome-session .session-more { margin-top: 5px; color: #d9c79a; font-size: 12px; }
#delve-outcome-campaign .campaign-line { display: block; margin: 3px 0; color: #ffe7a8; font-size: 13px; }
#delve-outcome-campaign .campaign-line b { color: #ffd24a; }

/* ---- THE LAST PORTER lobby (lobby-ui.js): who, party, the Great Glass ---- */
.lobby-gump { z-index: 9; box-sizing: border-box; max-width: calc(100vw - 32px); }
.lobby-gump .pp-title .uo-close { float: right; margin-left: 6px; }
#lobby-who { right: 14px; top: 120px; width: 300px; overflow-y: auto; }
.lobby-center { left: 50%; top: 40%; transform: translate(-50%, -50%); width: 360px; }
.lobby-glass { width: 560px; }
.lobby-list { max-height: 240px; overflow-y: auto; }
.lobby-row { display: flex; justify-content: space-between; gap: 8px; font: 12px/1.5 Georgia, serif; border-bottom: 1px dotted rgba(74, 56, 38, .35); }
.lobby-name { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-where { font-style: italic; text-align: right; color: #5a4020; }
.lobby-sub { font: bold 12px Georgia, serif; margin: 8px 0 2px; letter-spacing: 1px; }
.lobby-text { font: 13px/1.45 Georgia, serif; margin: 2px 0 10px; }
.lobby-hint { font: italic 11px/1.35 Georgia, serif; opacity: .85; margin-top: 8px; }
.lobby-actions { display: flex; gap: 10px; justify-content: center; }
.lobby-btn {
  min-width: 84px; padding: 5px 12px; border: 1.5px solid #4a3826; border-radius: 3px;
  font: bold 12px Georgia, serif; cursor: pointer; color: #f4ecd4; background: #5c4228;
}
.lobby-btn:hover { filter: brightness(1.2); }
.lobby-btn.lobby-yes { background: #2f5a2a; }
.lobby-menu { width: 180px; padding: 8px 10px; }
.lobby-menu .lobby-btn { display: block; width: 100%; margin-top: 5px; text-align: left; }
.lobby-stars { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lobby-star {
  width: 96px; padding: 8px 6px; text-align: center; border: 1.5px solid #4a3826; border-radius: 5px;
  background: rgba(20, 16, 30, .82); color: #8a8698; font: 11px Georgia, serif; opacity: .7;
}
.lobby-star.open { opacity: 1; color: #e8e2f4; }
.lobby-star.lit { color: #ffe39a; border-color: #d7b45d; box-shadow: 0 0 12px rgba(232, 194, 104, .45); }
.lobby-star.pick { cursor: pointer; }
.lobby-star.pick:hover { background: rgba(60, 40, 80, .9); box-shadow: 0 0 14px rgba(255, 90, 90, .7); }
.lobby-star-glyph { font-size: 30px; line-height: 1.1; }
.lobby-star.lit .lobby-star-glyph { text-shadow: 0 0 10px #ffd46a; }
.lobby-star-name { font-weight: bold; font-size: 11px; margin: 2px 0; }
.lobby-star-line { font-style: italic; font-size: 10px; }
.lobby-begin { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.lobby-begin input { width: 150px; padding: 4px 6px; border: 1.5px solid #6b512d; background: #fff8e0; font: 13px Georgia, serif; }
#party-away { margin-top: 3px; }
.party-away-row { font: italic 11px Georgia, serif; opacity: .85; }
#hud > #lobby-who-btn { position: absolute; left: 14px; bottom: 40px; z-index: 7; pointer-events: auto; }
#lobby-who-btn:hover { filter: brightness(1.25); }
@media (max-width: 620px) { .lobby-glass { width: calc(100vw - 32px); } #lobby-who { width: calc(100vw - 32px); right: 16px; } }

/* ---- THE LAST PORTER: the objective tracker (a small parchment gump, right) ---- */
#quest-tracker {
  position: absolute; top: 150px; right: 14px; z-index: 2; width: 262px;
  padding: 11px 16px 12px; box-sizing: border-box;
  background: url('assets/uo/gumps/02081-0x0821.png') 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.65));
  color: #2b2013; font: 12px/1.4 Georgia, 'Times New Roman', serif; text-align: left;
}
#quest-tracker .qt-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px;
  color: #7a1f1f; font: bold 9px/1.2 Verdana, sans-serif; letter-spacing: 1.2px;
}
#quest-tracker .qt-head b { color: #5a4630; font-weight: bold; letter-spacing: .5px; }
#qt-goal { font-weight: bold; font-size: 13.5px; line-height: 1.3; }
#qt-next { margin-top: 3px; font-style: italic; font-size: 11.5px; line-height: 1.38; }
#qt-steps { margin: 6px 0 0; padding: 5px 0 0; list-style: none; border-top: 1px solid rgba(74,56,38,.45);
  font-size: 10.5px; line-height: 1.45; color: #4a3826; }
#qt-steps li::before { content: '\25CB  '; color: #7a6040; }
#qt-steps li.done { color: #8a7a5c; text-decoration: line-through; }
#qt-steps li.done::before { content: '\2713  '; color: #3f6a2a; text-decoration: none; }
#qt-steps li.current { color: #7a1f1f; font-weight: bold; }
#qt-steps li.current::before { content: '\25B8  '; color: #7a1f1f; }
.delve-hud:has(#ghost-hud:not(.hidden)) #quest-tracker { visibility: hidden; }
/* ---- ONBOARDING: one small parchment card, top-right (public/shared/onboarding.js) ---- */
#onboard-card {
  position: absolute; top: 150px; right: 14px; z-index: 3; width: 248px;
  padding: 12px 17px 13px; box-sizing: border-box; pointer-events: auto; cursor: move; user-select: none;
  background: url('assets/uo/gumps/02081-0x0821.png') 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.65));
  color: #2b2013; font: 12.5px/1.42 Georgia, 'Times New Roman', serif; text-align: left;
}
#onboard-card .ob-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px;
  color: #7a1f1f; font: bold 10px/1.2 Verdana, sans-serif; letter-spacing: 1.2px; text-transform: uppercase;
}
#onboard-card .ob-head b { color: #6b5638; font-weight: normal; letter-spacing: .4px; text-transform: none; font-style: italic; font-family: Georgia, serif; }
#onboard-card .ob-text { font-size: 12.5px; }
#onboard-card .ob-progress { margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(74,56,38,.4);
  color: #4a3826; font: bold 11px/1.2 Georgia, serif; text-align: right; }
#onboard-card.ob-folded .ob-text, #onboard-card.ob-folded .ob-progress { display: none; }
#onboard-card.ob-folded .ob-head { margin-bottom: 0; }
#onboard-card.ob-fresh { animation: ob-arrive .45s ease-out; }
#onboard-card.ob-shift { right: auto; left: 50%; top: 46px; margin-left: -124px; z-index: 9; }
@keyframes ob-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.delve-hud:has(#ghost-hud:not(.hidden)) #onboard-card { visibility: hidden; }
@media (max-width: 620px) { #onboard-card { width: calc(100vw - 32px); right: 16px; top: 110px; } }
#quest-marker {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: translate(-50%, -100%);
  color: #ffe6a0; font: bold 10px Georgia, serif; letter-spacing: .4px; white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
#quest-marker span { padding: 1px 5px; background: rgba(14, 11, 8, .74); border: 1px solid #a88a48; }
#quest-marker .quest-arrow {
  order: 2; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #f2cf6a;
  filter: drop-shadow(0 1px 1px #000); transform: rotate(var(--quest-angle, 90deg));
}
#quest-marker.offscreen { transform: translate(-50%, -50%); }

/* ---- THE 1998 CHARACTER CREATION (public/js/charcreate.js) ------------------
   A 640x480 gump stage: every picture is client art, placed in gump pixels. */
.cc-root { position: fixed; inset: 0; z-index: 400; background: #000; overflow: clip; }
.cc-stage { position: absolute; left: 50%; top: 50%; width: 640px; height: 480px;
  transform-origin: 50% 50%; image-rendering: pixelated; user-select: none; }
.cc-modern .cc-stage { image-rendering: auto; }
.cc-stage * { box-sizing: border-box; }
.cc-stage .cc-gump, .cc-stage .cc-text, .cc-stage .cc-tiled, .cc-stage .cc-resize,
.cc-stage .cc-btn, .cc-stage .cc-doll, .cc-stage canvas, .cc-stage .cc-slider, .cc-stage .cc-picker,
.cc-stage .cc-combo, .cc-stage .cc-popup, .cc-stage .cc-name, .cc-stage .cc-name-text,
.cc-stage .cc-city-desc, .cc-stage .cc-walker { position: absolute; }
.cc-stage .cc-resize canvas { position: static; display: block; }
.cc-stage .cc-tiled { background-repeat: repeat; }
.cc-stage img { image-rendering: pixelated; pointer-events: none; }
.cc-btn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 0; }
.cc-btn:focus-visible, .cc-combo:focus-visible, .cc-colorbox:focus-visible, .cc-name:focus-visible {
  outline: 1px dotted #f4d98a; outline-offset: 1px; }
.cc-btn.cc-dark { filter: grayscale(1) brightness(.55); }
.cc-name { width: 200px; height: 20px; background: transparent; border: 0; outline: none;
  color: transparent; caret-color: #f4d98a; font: 13px monospace; padding: 0 2px; }
.cc-name-text { pointer-events: none; }
.cc-slider { height: 14px; }
.cc-slider .cc-gump { position: absolute; }
.cc-slider .cc-thumb { top: 0; }
.cc-slider-value { position: absolute; }
.cc-range { position: absolute; left: -4px; top: -4px; width: calc(100% + 8px); height: 22px;
  margin: 0; opacity: 0; cursor: pointer; }
.cc-combo { height: 25px; background: none; border: 0; padding: 0; cursor: pointer; }
.cc-combo > canvas, .cc-combo-list > canvas { position: absolute !important; left: 0; top: 0; }
.cc-combo .cc-gump { position: absolute; }
.cc-combo-text { position: absolute; pointer-events: none; }
.cc-combo-list { z-index: 20; }
.cc-combo-scroll { position: absolute; left: 4px; top: 5px; right: 4px; overflow-y: auto;
  scrollbar-width: thin; }
.cc-combo-row { display: block; width: 100%; height: 15px; background: none; border: 0;
  padding: 0 2px; text-align: left; cursor: pointer; line-height: 0; }
.cc-combo-row canvas { position: static !important; }
.cc-combo-row:hover, .cc-combo-row.sel { background: rgba(120, 90, 40, .25); }
.cc-combo-row.off { cursor: not-allowed; opacity: .4; }
.cc-combo-scroll { scrollbar-width: auto; scrollbar-color: #7a5a2a rgba(0,0,0,.15); }
.cc-colorbox { position: absolute; width: 121px; height: 23px; border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.cc-grid { display: grid; z-index: 20; outline: 2px solid #1b1b1b; box-shadow: 0 0 0 3px #6d6d6d; }
.cc-cell { border: 0; padding: 0; margin: 0; cursor: pointer; }
.cc-cell.sel, .cc-cell:hover { outline: 1px solid #fff; outline-offset: -1px; z-index: 1; }
.cc-city-desc { width: 175px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.cc-city-desc canvas { position: static !important; }
.cc-stage .cc-message { position: absolute; z-index: 30; width: 300px; height: 124px; }
.cc-walker { pointer-events: none; }

/* ---- R3-02: the public moongate's destination gump (moongate-client.js) ----
   RunUO's pre-AoS MoongateGump: the grey stone 0x13BE background, a gem per
   city, OKAY / CANCEL. Not modal: it sits above the gate, walking still works. */
.moongate-gump {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  z-index: 9; pointer-events: auto; image-rendering: pixelated;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.72));
  font-family: Georgia, serif; color: #e8dfcb; user-select: none;
}
.moongate-gump.hidden { display: none; }
.moongate-gump .mg-title { position: absolute; left: 18px; top: 14px; font: bold 14px Georgia, serif; color: #f4ecd4; text-shadow: 1px 1px 0 #000; }
.moongate-gump .mg-facet { position: absolute; left: 18px; top: 36px; font: italic 12px Georgia, serif; color: #cfc4a8; }
.moongate-gump .mg-list { position: absolute; left: 18px; top: 60px; right: 18px; }
.moongate-gump .mg-row { display: flex; align-items: center; gap: 8px; height: 25px; font: 13px Georgia, serif; cursor: pointer; color: #f0e6cc; }
.moongate-gump .mg-row:hover span { color: #fff; }
.moongate-gump .mg-row.dark { cursor: default; color: #c9bfa8; font-style: italic; opacity: .8; }
.moongate-gump .mg-row img { width: 14px; height: 14px; }
.moongate-gump .mg-buttons { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 18px; justify-content: center; }
.moongate-gump .mg-art-btn { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
/* WAVE 4 SAFETY (N4-01): the "Resurrect?" gump (res-gump.js) wears the same stone */
.moongate-gump.res-gump { top: 54%; } /* below the ghost banner */
.res-gump .rg-text { position: absolute; left: 18px; right: 18px; top: 40px; font: 13px Georgia, serif; color: #f0e6cc; line-height: 1.35; }
.res-gump .rg-notes { position: absolute; left: 18px; right: 18px; top: 86px; font: italic 11px Georgia, serif; color: #cfc4a8; line-height: 1.4; }

/* ---- R3-02 runes: a mage's wares on the counter prompt, and the runebook gump ---- */
#shop-prompt .shop-wares { display: flex; gap: 8px; justify-content: center; margin-top: 5px; }
#shop-prompt .shop-ware {
  pointer-events: auto; cursor: pointer; padding: 2px 10px;
  font: bold 12px Georgia, serif; color: #f4ecd4; background: #3a4a5c;
  border: 1px solid #8fc9e8; border-radius: 3px;
}
#shop-prompt .shop-ware:hover { filter: brightness(1.25); }
.runebook-gump {
  left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box; z-index: 9;
  border-color: #5a1a14;
}
.runebook-gump .pp-title { color: #5a1a14; }
.runebook-gump .rb-count { font: italic 12px Georgia, serif; margin: 0 0 6px; }
.runebook-gump .rb-list { max-height: 300px; overflow-y: auto; margin-bottom: 8px; }
.runebook-gump .rb-entry {
  display: flex; align-items: center; gap: 5px; padding: 3px 2px;
  border-bottom: 1px dotted rgba(74, 56, 38, .45); font: 12px Georgia, serif;
}
.runebook-gump .rb-entry.chosen .rb-name { color: #6b1f14; font-weight: bold; }
.runebook-gump .rb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runebook-gump .rb-empty { font: italic 12px Georgia, serif; padding: 6px 2px; }
.runebook-gump button {
  padding: 2px 7px; border: 1px solid #4a3826; border-radius: 3px; cursor: pointer;
  font: bold 11px Georgia, serif; color: #f4ecd4; background: #5c4228;
}
.runebook-gump button.rb-add { font-size: 12px; padding: 4px 12px; }
.runebook-gump button:hover { filter: brightness(1.2); }

/* ---- THE VENDOR GUMP (wave3 economy, R3-09/R3-10): the 1998 buy and sell
   gumps on their own art — the keeper's list (0x0870 / 0x0872) beside the
   bill (0x0871 / 0x0873). Coordinates are the art's own, 1x. ---- */
.vendor-gump {
  /* the box between the two scrolls is empty: only the art takes the pointer */
  position: absolute; left: 180px; top: 90px; width: 556px; height: 340px; z-index: 7;
  pointer-events: none; font: bold 10px Georgia, serif; color: #1c2a6b;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.72));
}
.vendor-gump .vg-list { position: absolute; left: 0; top: 0; width: 283px; height: 307px; cursor: move; pointer-events: auto; }
.vendor-gump .vg-bill { position: absolute; left: 272px; top: 58px; width: 283px; height: 248px; pointer-events: auto; }
.vendor-gump .vg-art { position: absolute; left: 0; top: 0; pointer-events: none; image-rendering: pixelated; }
.vendor-gump .vg-close { position: absolute; right: 16px; top: 4px; z-index: 2; cursor: pointer; }
.vendor-gump .vg-keeper {
  position: absolute; left: 30px; top: 224px; width: 210px; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font: italic bold 10px Georgia, serif; color: #5a3d22;
}
.vendor-gump .vg-rows {
  position: absolute; left: 30px; top: 58px; width: 210px; height: 164px; overflow-y: auto; overflow-x: hidden;
  cursor: default; scrollbar-width: thin; scrollbar-color: #8a6a3a transparent;
}
.vendor-gump .vg-row { display: flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 2px; }
.vendor-gump .vg-row:hover { background: rgba(120, 90, 40, .16); }
.vendor-gump .vg-row-art { flex: 0 0 auto; max-width: 30px; max-height: 26px; object-fit: contain; image-rendering: pixelated; }
.vendor-gump .vg-row-name { flex: 1 1 auto; min-width: 0; line-height: 11px; font-size: 9.5px; }
.vendor-gump .vg-row-avail { flex: 0 0 24px; text-align: right; font-size: 9.5px; }
.vendor-gump .vg-none { padding: 18px 6px; font: italic 11px Georgia, serif; text-align: center; color: #5a3d22; }
.vendor-gump .vg-bill-rows {
  position: absolute; left: 28px; top: 64px; width: 228px; height: 92px; overflow-y: auto; scrollbar-width: thin;
}
.vendor-gump .vg-bill-row { display: flex; align-items: center; gap: 3px; height: 19px; }
.vendor-gump .vg-amt {
  flex: 0 0 34px; text-align: left; padding: 0; background: none; border: 0; cursor: pointer;
  font: bold 10px Georgia, serif; color: #1c2a6b; text-decoration: underline dotted;
}
.vendor-gump .vg-bill-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vendor-gump .vg-more, .vendor-gump .vg-less { flex: 0 0 14px; width: 14px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.vendor-gump .vg-more img, .vendor-gump .vg-less img { display: block; }
.vendor-gump .vg-total, .vendor-gump .vg-gold { position: absolute; top: 166px; font: bold 11px Georgia, serif; }
.vendor-gump .vg-total { left: 72px; }
.vendor-gump .vg-total.short { color: #9a1c10; }
.vendor-gump .vg-gold { left: 190px; }
.vendor-gump.vg-selling .vg-total { left: 172px; }
.vendor-gump .vg-accept, .vendor-gump .vg-clear { position: absolute; background: none; border: 0; padding: 0; cursor: pointer; }
.vendor-gump .vg-accept { left: 28px; top: 186px; width: 66px; height: 54px; }
.vendor-gump .vg-clear { left: 196px; top: 190px; width: 54px; height: 50px; }
.vendor-gump .vg-accept:disabled { cursor: default; }
.vendor-gump .vg-accept:not(:disabled):hover, .vendor-gump .vg-clear:hover { background: radial-gradient(circle at 30% 45%, rgba(255,240,190,.28), transparent 60%); }
.vendor-gump .vg-foot { position: absolute; left: 24px; top: 312px; display: flex; gap: 6px; pointer-events: auto; }
.vendor-gump .vg-foot button {
  background: #d9c48f; border: 1px solid #4a3826; border-radius: 3px; padding: 3px 8px; cursor: pointer;
  font: bold 10px Georgia, serif; color: #2b2013;
}
.vendor-gump .vg-foot button:disabled { opacity: .55; cursor: default; }
.vendor-gump .hidden { display: none; }
/* THE ECONOMY: the use-skill gem (0x0837) before a usable skill's name (Item Identification) */
.skills-gump .sg-row:has(.sg-use) { position: relative; }
.skills-gump .sg-use { position: absolute; left: 5px; top: 2px; width: 11px; height: 11px; padding: 0; border: 0; background: none; cursor: pointer; }
.skills-gump .sg-use img { display: block; image-rendering: pixelated; pointer-events: none; }
.skills-gump .sg-use:hover img { filter: brightness(1.3) drop-shadow(0 0 2px rgba(140, 180, 255, .9)); }

/* ---- CRAFTING crew (wave 4): RunUO's CraftGump (craft-client.js) ----
   530 x 437 on the grey stone 0x13BE, the dark 2624 panels under an alpha
   region, white labels, the 4005 / 4017 arrow buttons. Not modal. */
.craft-gump {
  position: absolute; left: 50%; top: 46%; width: 530px; height: 437px; box-sizing: border-box;
  transform: translate(-50%, -50%); z-index: 9; pointer-events: auto; image-rendering: pixelated;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.72)); user-select: none;
  font: 12px Georgia, 'Times New Roman', serif; color: #fff;
}
.craft-gump .cg-panel { position: absolute; background-repeat: repeat; opacity: .82; }
.craft-gump .cg-label { position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; color: #f4f4f4; text-shadow: 1px 1px 0 #000; }
.craft-gump .cg-title, .craft-gump .cg-head { text-align: center; font-weight: bold; letter-spacing: .5px; }
.craft-gump .cg-on { color: #ffe27a; }
.craft-gump .cg-dim { color: #9a9a9a; }
.craft-gump .cg-small { font-size: 11px; color: #d8d8d8; }
.craft-gump .cg-notice { font-style: italic; color: #e8dcb0; white-space: normal; line-height: 14px; }
.craft-gump .cg-btn { position: absolute; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 0; }

/* ---- THE ENTRY GUMP, THE CHARACTER LIST, THE PROFESSION CARDS (crew C1) -----
   public/js/entry.js + charcreate.js professionScreen: the same 640x480 stage. */
.cc-stage .cc-plate, .cc-stage .cc-card, .cc-stage .cc-charlist, .cc-stage .cc-charrow,
.cc-stage .cc-status, .cc-stage .cc-plate-text, .cc-stage .cc-card-inner { position: absolute; }
.cc-stage .cc-plate > canvas.cc-plate-bg, .cc-stage .cc-card > canvas.cc-card-bg { left: 0; top: 0; }
.cc-stage .cc-plate-text { pointer-events: none; }
.cc-stage .cc-plate-text canvas { position: static; display: block; }
.cc-plate.cc-plate-dim { cursor: default; }
.cc-stage .cc-status { width: 640px; height: 20px; pointer-events: none; }
.cc-stage .cc-card-inner { inset: 0; pointer-events: none; }
.cc-card { transition: filter .12s; }
.cc-card:not(.sel) { filter: brightness(.8) saturate(.85); }
.cc-card:not(.sel):hover { filter: brightness(.93); }
.cc-stage .cc-card-doll { image-rendering: pixelated; }
.cc-stage .cc-charlist { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
  scrollbar-color: #7a5a2a rgba(0,0,0,.15); }
.cc-charrow:not(.sel) { filter: brightness(.86); }
.cc-charrow:hover { filter: none; }
.cc-stage .cc-row-icon { image-rendering: auto; }
.entry-root { z-index: 390; }
/* M13: the radar's button lit while the radar is up */
#hud-buttons button#hud-radar.on { background: #4f3a1e; border-color: #d8b46a; }

/* Dismissible lessons and offered work share the parchment vocabulary. */
.card-dismiss { float: right; cursor: pointer; border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 18px; padding: 0 4px; }
#dismissible-quests { position: absolute; right: 10px; top: 320px; width: 250px; max-height: 35vh; overflow: auto; pointer-events: auto; }
.quest-offer-card { color: #e4d3ab; background: rgba(35, 26, 15, .92); border: 1px solid #8a7450; padding: 10px; margin-bottom: 6px; font: 13px Georgia, serif; }
.quest-offer-card p { margin: 6px 0 0; }