/* ==========================================================================
   CLASSIC UI (2026-10-06, UI_AUDIT.md): the paperdoll's button column, the
   Character Status gump, the round radar and the spell/skill icon tiles, all
   on the client's own gump art. Loaded last: it overrides the older layers in
   style.css / gumps.css without editing them.
   ========================================================================== */

/* ---- 1. paperdoll 0x07D0: the button column at x 185, y 44 + 27 each ---- */
#paperdoll-panel #pp-button-strip { position: absolute; left: 185px; top: 44px; width: 66px; height: 189px; z-index: 5; }
#paperdoll-panel #pp-button-strip .pp-art-btn {
  position: absolute; left: 0; right: auto; width: 64px; height: 21px; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; appearance: none; opacity: 1;
  background-color: transparent; background-position: 0 0; background-size: 100% 100%; background-repeat: no-repeat;
  image-rendering: pixelated; color: transparent; font-size: 0; overflow: hidden;
}
#paperdoll-panel #pp-button-strip .pp-art-btn.hidden { display: none; }
#paperdoll-panel #pp-help { top: 0; background-image: url('assets/uo/gumps/02031-0x07EF.png'); }
#paperdoll-panel #pp-help:hover { background-image: url('assets/uo/gumps/02033-0x07F1.png'); }
#paperdoll-panel #pp-help:active { background-image: url('assets/uo/gumps/02032-0x07F0.png'); }
#paperdoll-panel #pp-options { top: 27px; background-image: url('assets/uo/gumps/02006-0x07D6.png'); }
#paperdoll-panel #pp-options:hover { background-image: url('assets/uo/gumps/02008-0x07D8.png'); }
#paperdoll-panel #pp-options:active { background-image: url('assets/uo/gumps/02007-0x07D7.png'); }
#paperdoll-panel #pp-logout { top: 54px; height: 22px; background-image: url('assets/uo/gumps/02009-0x07D9.png'); }
#paperdoll-panel #pp-logout:hover { background-image: url('assets/uo/gumps/02011-0x07DB.png'); }
#paperdoll-panel #pp-logout:active { background-image: url('assets/uo/gumps/02010-0x07DA.png'); }
#paperdoll-panel #pp-journal { top: 81px; background-image: url('assets/uo/gumps/02012-0x07DC.png'); }
#paperdoll-panel #pp-journal:hover { background-image: url('assets/uo/gumps/02014-0x07DE.png'); }
#paperdoll-panel #pp-journal:active { background-image: url('assets/uo/gumps/02013-0x07DD.png'); }
#paperdoll-panel #pp-skills { top: 108px; width: 65px; background-image: url('assets/uo/gumps/02015-0x07DF.png'); }
#paperdoll-panel #pp-skills:hover { background-image: url('assets/uo/gumps/02017-0x07E1.png'); }
#paperdoll-panel #pp-skills:active { background-image: url('assets/uo/gumps/02016-0x07E0.png'); }
/* (CHAT, 0x07E2, would sit at 135: no chat channels or guilds here, so it is not drawn) */
#paperdoll-panel #pp-peace-mode { top: 135px; height: 22px; background-image: url('assets/uo/gumps/02021-0x07E5.png'); }
#paperdoll-panel #pp-peace-mode:hover { background-image: url('assets/uo/gumps/02023-0x07E7.png'); }
#paperdoll-panel #pp-peace-mode:active { background-image: url('assets/uo/gumps/02022-0x07E6.png'); }
#paperdoll-panel #pp-peace-mode[data-war="1"] { background-image: url('assets/uo/gumps/02024-0x07E8.png'); }
#paperdoll-panel #pp-peace-mode[data-war="1"]:hover { background-image: url('assets/uo/gumps/02026-0x07EA.png'); }
#paperdoll-panel #pp-peace-mode[data-war="1"]:active { background-image: url('assets/uo/gumps/02025-0x07E9.png'); }
#paperdoll-panel #pp-status { top: 162px; height: 22px; width: 65px; background-image: url('assets/uo/gumps/02027-0x07EB.png'); }
#paperdoll-panel #pp-status:hover { background-image: url('assets/uo/gumps/02029-0x07ED.png'); }
#paperdoll-panel #pp-status:active { background-image: url('assets/uo/gumps/02028-0x07EC.png'); }
/* the spellbook (its item art 0x0EFA) on the bare stone above HELP: open the books, or drop a scroll on it
   (the right side, as the old BOOKS button: the lesson cards land over the doll's lower left) */
#paperdoll-panel #pp-books {
  position: absolute; left: 194px; right: auto; top: 7px; z-index: 6; width: 40px; height: 34px; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
  font-size: 0; color: transparent; filter: drop-shadow(0 1px 2px #000);
}
#paperdoll-panel #pp-books img { width: 40px; height: 33px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
#paperdoll-panel #pp-books:hover, #paperdoll-panel #pp-books.drag-over { filter: drop-shadow(0 0 6px #ffd98a) brightness(1.2); }

/* ---- 2. the Character Status gump 0x2A6D (427 x 184) ---- */
#classic-status {
  position: absolute; left: 6px; top: 6px; width: 427px; height: 184px; z-index: 6;
  background: url('assets/uo/gumps/10861-0x2A6D.png') 0 0 / 427px 184px no-repeat;
  pointer-events: auto; user-select: none; cursor: move; transform-origin: top left;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.7));
}
#classic-status.hidden { display: none; }
#classic-status .cs-title {
  position: absolute; left: 70px; right: 70px; top: 13px; text-align: center; pointer-events: none;
  font: bold 13px/16px Georgia, serif; letter-spacing: 2px; text-transform: uppercase; font-variant: small-caps;
  color: #e9d38a; text-shadow: 0 1px 0 #2a2014, 0 0 3px #000;
}
#classic-status .cs-name {
  position: absolute; left: 50px; right: 50px; top: 46px; height: 16px; text-align: center; pointer-events: none;
  font: bold 11px/16px Georgia, serif; color: #1f1a12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#classic-status .cs-cell {
  position: absolute; height: 28px; display: flex; align-items: center; justify-content: center;
  font: bold 11px Georgia, serif; color: #1f1a12; white-space: nowrap; overflow: hidden;
}
#classic-status .cs-cell.cs-pair { flex-direction: column; line-height: 11px; font-size: 10px; }
#classic-status .cs-cell.cs-pair b { border-bottom: 1px solid #3a3226; padding: 0 3px; }
#classic-status .cs-cell.cs-pair i { font-style: normal; }
#classic-status .cs-resist {
  position: absolute; left: 347px; width: 34px; height: 13px; text-align: center;
  font: bold 9px/13px Georgia, serif; color: #1f1a12; white-space: nowrap;
}
#classic-status .cs-min {
  position: absolute; left: 383px; top: 146px; width: 26px; height: 26px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
#classic-status .cs-min:hover { background: radial-gradient(circle, rgba(255,230,150,.35), transparent 70%); }
/* the bar steps aside while the full gump is up, and what sat under the bar steps down */
#self-status.status-folded { display: none; }
body.status-full #ally-panel { top: 196px; }

/* ---- 3. the round radar 0x1392 / 0x1393 (classic-ui radar.js) ---- */
#radar.classic-radar {
  padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.65)); cursor: default;
}
#radar.classic-radar .frame { position: relative; display: block; }
#radar.classic-radar .frame > img { position: absolute; left: 0; top: 0; pointer-events: none; image-rendering: pixelated; z-index: 2; }
/* the frame's middle is opaque black: the round face lies over it, inside the ring */
#radar.classic-radar canvas { position: absolute; border: 0; border-radius: 50%; z-index: 3; background: #0c0c0c; }
#radar.classic-radar .foot {
  margin-top: -6px; max-width: none; text-align: center; position: relative; z-index: 4;
  font: bold 13px Georgia, serif; letter-spacing: .5px; color: #f2eee4;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
body.radar-up #onboard-card, body.radar-up #quest-tracker, body.radar-up #enemy-status { top: 238px; }
body.radar-up.radar-large #onboard-card, body.radar-up.radar-large #quest-tracker, body.radar-up.radar-large #enemy-status { top: 318px; }

/* ---- 4. the backpack 0x003C and the doll keep their old homes (style.css): the journeys and the
   container gumps' cascade (ui.js GUMP_HOME) are laid out around them. Both drag anywhere and stay put. ---- */

/* ---- 5. spell, art and skill tiles (the client's spell-icon and skill-button gumps) ---- */
.uo-icon-tile {
  position: absolute; z-index: 6; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; background: transparent; pointer-events: auto; user-select: none; cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.75));
}
.uo-icon-tile img { display: block; width: 44px; height: 44px; image-rendering: pixelated; pointer-events: none; }
.uo-icon-tile:hover { filter: drop-shadow(0 0 4px #ffd98a) brightness(1.12); }
.uo-icon-tile:active { filter: brightness(.85); }
.uo-icon-tile.unusable img { filter: grayscale(1) brightness(.75); }
/* a tile without its own icon (a skill, an art with none): the client's skill button, its name on plate 0x24B8 */
.uo-icon-tile.named {
  width: auto; min-width: 96px; height: 25px; padding: 0 4px; box-sizing: border-box;
  border-style: solid; border-color: transparent; border-width: 13px 11px 10px 11px;
  border-image: url('assets/uo/gumps/nine-24B8.png') 13 11 10 11 fill / 13px 11px 10px 11px stretch;
  display: flex; align-items: center; justify-content: center;
  font: bold 10px/1 Georgia, serif; color: #f6efd8; text-shadow: 0 1px 1px #000; white-space: nowrap;
}
.uo-icon-tile:focus, .uo-icon-tile:focus-visible { outline: none; }
.uo-icon-tile.dragging { opacity: .35; }
/* the bar stands clear of the HUD's button row (they met at 1280 px) */
#hotbar { bottom: 34px; }
#control-status { bottom: 120px; }

/* a phone on its side (the reference's layout): the status gump and the radar at a smaller scale */
@media (max-height: 500px) {
  #classic-status { transform: scale(.55); }
  body.status-full #ally-panel { top: 110px; }
  #radar { transform: scale(.72); transform-origin: top right; }
}
@media (max-width: 620px) {
  #classic-status { transform: scale(.62); }
  body.status-full #ally-panel { top: 124px; }
  .uo-icon-tile { transform: scale(.8); }
}