/* Client desktop composition: separate native gumps on a black workspace.
   Load LAST. The map begins at the top edge; commands live below it.
   All frame/scroll/button textures are original decoded client art. */
:root { --dock-width: 300px; --chrome-height: 0px; }
.travel-progress {padding:4px 8px 1px;color:#d3c39a;font-size:15px;line-height:1.25;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:3px 14px;align-items:center;}
.travel-progress-top {display:flex;gap:12px;justify-content:space-between;}
.travel-progress-top b {white-space:nowrap;font-weight:normal;}
.travel-progress small {grid-column:1/-1;color:#b9ac8b;font-size:13px;}
.travel-progress-meter {height:13px;background:url('assets/uo/health-frame.png') center/100% 100% no-repeat;overflow:hidden;}
.travel-progress-meter span {display:block;height:100%;background:url('assets/uo/health-fill.png') left center/210px 100% no-repeat;}
@media(min-width:621px){.world-card canvas {height:calc(100dvh - 228px);}}
@media(max-width:760px){.travel-progress{grid-template-columns:minmax(0,1fr);}.travel-progress-meter{width:210px;max-width:100%;}}
html, body, .app-shell, .app-body { background: #000; }
.screen {animation:none;}
.app-shell { height: 100dvh; min-height: 0; display: block; }
.app-body {
  display: grid; width: 100%; height: 100dvh; min-height: 0;
  grid-template-columns: minmax(0,1fr) var(--dock-width);
  grid-template-rows: minmax(0,1fr) 32px;
  align-items: stretch; gap: 0;
}

/* Resources belong to the character desktop, not a website header. */
.topbar {
  position: fixed; z-index: 31; top: auto; left: auto; right: 8px; bottom: 3px;
  display: flex; justify-content: center; width: calc(var(--dock-width) - 16px);
  height: 25px; min-height: 0; padding: 0; border: 0;
  background: #000; box-shadow: none; backdrop-filter: none;
}
.topbar .brand, .topbar .realm-indicator, .topbar .profile-button { display: none; }
.topbar .top-resources { display: flex; margin: 0; gap: 12px; }
.topbar .resource-chip {
  min-width: 0; padding: 0; gap: 4px; border: 0; background: transparent;
  color: #d9c99d; font-size: 15px; font-weight: normal; box-shadow: none;
}
.topbar .resource-chip small { display: inline; color: #a89b7a; font-size: 12px; }
.topbar .resource-glyph { display: none; }

/* The native world is the main window. No heading or guide pushes it down. */
.main-column {
  grid-column: 1; grid-row: 1; width: 100%; min-width: 0;
  padding: 6px 3px 4px 6px; margin: 0; overflow-y: auto;
  overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #5b5546 #000;
}
.screen-battle > .page-heading, .screen-battle > .progression-guide { display: none; }
.screen-battle .game-layout { display: block; }
.screen-battle .play-column { display: flex; gap: 4px; }
.screen-battle .game-layout > .right-column { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; margin-top: 8px; }
.screen-battle > .lower-grid { display: none; }
.world-card {
  border: 4px solid transparent;
  border-image: url('assets/uo/classic-ui/stone-alternate-border.png') 20 fill / 4px / 0 stretch;
  background: #000; border-radius: 0; box-shadow: none;
}
.world-card::before, .world-frame-corner, .world-vignette { display: none; }
.world-card canvas {
  display: block; width: 100%; height: calc(100dvh - 198px);
  min-height: 320px; max-height: none; image-rendering: pixelated;
}
.world-topline { left: 8px; right: 8px; top: 6px; }
.world-topline .zone-pill {
  max-width: 80%; min-height: 23px; padding: 2px 6px;
  border: 0; background: #080806aa; color: #ddd0aa;
  font-size: 14px; line-height: 1.2; letter-spacing: 0; text-shadow: 1px 1px #000;
}
.world-topline .zone-pill:hover { color: #fff3c9; background: #13120ce6; }
.zone-spark, .region-readout { display: none; }
.world-bottomline {
  bottom: 5px; right: 7px; left: 7px; font-size: 11px;
  letter-spacing: 0; color: #e0d7b3; text-shadow: 1px 1px #000;
}
.world-bottomline > span { padding: 2px 4px; background: #0008; }
.world-bottomline .live-indicator { box-shadow: none; }
.location-status { font-size: 12px; line-height: 1.2; margin: 1px 3px; }
.location-services { gap: 4px; margin: 2px; }
.location-services button {
  min-height: 24px; padding-top: 3px; padding-bottom: 3px;
  background: transparent; color: #d7c59a; box-shadow: none;
  font-size: 13px;
}
.journey-prompt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  min-height: 32px; margin: 3px 0; padding: 4px 9px;
  border: 0; background: transparent; color: #d6c49c;
  font-size: 14px; line-height: 1.25;
}
.journey-prompt :is(b,strong,span) { color: #29220f; font-size: 14px; font-weight: normal; }
.journey-prompt > span {
  flex: 0 1 350px; min-width: 220px; max-width: 100%; padding: 5px 9px;
  background: url('assets/uo/classic-ui/gump-0821.png') center / 100% 100% no-repeat;
}
.journey-prompt button {
  min-height: 24px; padding: 2px 4px 2px 24px; border: 0;
  background: var(--gump-arrow) 1px center / 17px 19px no-repeat;
  color: #d9c79f; font-size: 14px; cursor: pointer;
}
.journey-prompt button:hover { color: #fff2cb; text-decoration: underline; }

/* A compact row of framed commands replaces the full-width stone navbar.
   The thin gold edge is the native 0A3C..0A44 window, not a CSS imitation. */
.side-nav, .side-nav.more-open {
  position: relative; z-index: 40; grid-column: 1; grid-row: 2;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  width: 100%; min-height: 32px; height: 32px; padding: 0 6px 4px;
  gap: 4px; overflow: visible; border: 0; background: #000; box-shadow: none;
}
.side-nav .nav-item, .side-nav.more-open > .nav-primary, .side-nav.more-open > .nav-more {
  display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0;
  width: auto; min-width: 0; height: 27px; min-height: 27px;
  margin: 0; padding: 2px 6px; gap: 3px; flex-direction: row;
  border: 3px solid transparent;
  border-image: url('assets/uo/classic-ui/stone-alternate-border.png') 20 fill / 3px / 0 stretch;
  border-radius: 0; color: #d9c798; background: transparent; box-shadow: none;
  font-size: 14px; font-weight: normal; line-height: 1.1; text-align: center; letter-spacing: 0;
}
.side-nav .nav-item:hover, .side-nav .nav-item.active,
.side-nav.more-open .nav-item.active {
  background: #292c1c; color: #f4e4b6; box-shadow: none;
}
.side-nav .nav-icon { display: none; }
.side-nav .nav-more { flex: 1.3 1 0; margin-left: 0; }
.side-nav .nav-badge { position: static; flex-shrink: 0; width: 14px; height: 14px; font-size: 11px; }
.side-nav .secondary-nav {
  top: auto; bottom: 37px; right: 5px; width: min(420px,calc(100vw - var(--dock-width) - 18px));
  max-height: calc(100dvh - 60px); overflow-y: auto;
  border-width: 26px; padding: 7px; background: var(--gump-stone);
  box-shadow: 3px 4px #000b;
}
.side-nav.more-open .secondary-nav { display: grid; }
.side-nav .secondary-nav .nav-item {
  justify-content: flex-start; width: 100%; height: auto; min-height: 30px;
  flex-direction: row; padding: 4px 3px 4px 24px;
  color: #161b11; border: 0; background: var(--gump-arrow) left 5px / 19px 21px no-repeat;
  font-size: 16px; text-align: left;
}
.side-nav .secondary-nav .nav-item:hover { background-color: #d0d2b866; }
.side-nav .secondary-nav .nav-group-label { color: #252b1b; letter-spacing: 0; font-size: 13px; }

/* Combat is controlled beneath the map with small game commands and a
   journal line. It occupies no more than the short strip it needs. */
.screen-battle .combat-controls {
  position: relative; padding: 0 0 0; border: 0; background: #000;
  color: #c5b895; box-shadow: none;
}
.screen-battle .combat-controls-title {
  position: absolute; right: 1px; top: 0; margin: 0;
  min-height: 26px; height: 26px;
}
.screen-battle .combat-controls-title > div { display: none; }
.screen-battle .combat-controls-title .text-button {
  min-height: 26px; padding: 4px 6px; color: #b6aa8a; font-size: 13px;
}
.screen-battle .skill-row {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px; width: calc(100% - 90px);
}
.screen-battle .skill-card {
  min-height: 28px; height: 28px; justify-content: flex-start;
  padding: 2px 5px; border: 0; background: #000; border-radius: 0;
  color: #c8ba96; box-shadow: none;
}
.screen-battle .skill-card.skill-selected { border: 0; background: #000; box-shadow: none; }
.screen-battle .skill-card .skill-icon {
  display: block; width: 19px; height: 20px; flex: 0 0 19px;
  border: 0; border-radius: 0; background: url('assets/uo/classic-ui/gump-00d0.png') center / 19px 20px no-repeat;
  color: transparent; font-size: 0;
}
.screen-battle .skill-card.skill-selected .skill-icon { background-image: url('assets/uo/classic-ui/gump-00d1.png'); }
.screen-battle .skill-meta strong { color: #d8c8a2; font-size: 15px; line-height: 1.2; }
.screen-battle .skill-meta small, .screen-battle .skill-key { display: none; }
.screen-battle .battle-feed {
  margin: 2px 0 0; min-height: 28px; padding: 4px 8px;
  border: 2px solid transparent;
  border-image: url('assets/uo/classic-ui/stone-alternate-border.png') 20 fill / 2px / 0 stretch;
  border-radius: 0; background: #000; color: #bbac86; font-size: 14px;
}
.screen-battle .battle-feed .feed-icon { display: none; }
.screen-battle .battle-feed time { color: #857b61; font-size: 11px; }

/* The right side is a desktop of native paperdoll, status and scroll gumps. */
.character-dock {
  grid-column: 2; grid-row: 1 / 3; position: relative; top: auto;
  width: var(--dock-width); min-height: 0; padding: 5px 10px 34px;
  overflow-y: auto; overflow-x: hidden; background: #000; border: 0;
}
.character-dock .hero-panel { display: block; padding: 0; background: transparent; border: 0; box-shadow: none; }
.character-dock .paperdoll { width: 262px; height: 324px; margin: 0 auto 5px; background-size: 262px 324px; }
.character-dock #paperdoll-avatar { left: 21px; top: 41px; width: 150px; height: 214px; }
.character-dock .paperdoll-buttons { top: 39px; right: 8px; width: 66px; gap: 4px; }
.character-dock .paperdoll-buttons button, .character-dock .paperdoll-buttons .class-change {
  height: 22px; min-height: 22px; font-size: 12px; background: transparent; padding: 0;
}
.character-dock .paperdoll-name { bottom: 13px; left: 19px; right: 19px; gap: 1px; }
.character-dock #edit-hero-name { font-size: 16px; }
.character-dock #paperdoll-title { font-size: 13px; }
.character-dock .paperdoll-name small { font-size: 10px; }
.character-dock .stats-gump { width: 262px; max-width: 100%; height: 110px; margin: 0 auto; }
.character-dock .vital-row { height: 17px; }
.character-dock .stats-gump .hero-stats { bottom: 5px; }
.character-dock .hero-stats > div { min-height: 34px; }
.character-dock .hero-panel > .level-line { width: 262px; max-width: 100%; margin: 3px auto 2px; font-size: 11px; }
.character-dock .hero-panel > .xp-meter { width: 262px; max-width: 100%; height: 4px; margin: 0 auto; }
.character-dock #dock-equip-best {
  display: block; width: 262px; max-width: 100%; min-height: 24px; margin: 5px auto 2px;
  border: 0; padding: 2px 4px 2px 25px; background: transparent;
  color: #d4c39b; font-size: 14px; line-height: 1.2; box-shadow: none;
}
.character-dock #dock-equip-best::before { left: 1px; background-size: 17px 19px; }
.character-dock .music-controls { margin: 0 0 2px; border: 0; background: transparent; padding: 0; }
.character-dock .music-controls summary { min-height: 20px; padding: 2px 6px; color: #b9aa87; font-size: 12px; }
.character-dock .dock-extras { grid-template-columns: 96px minmax(0,1fr); gap: 6px; margin-top: 2px; }
.character-dock .dock-bag { min-height: 150px; background-size: 100% auto; background-position: center 25px; }
.character-dock .dock-section-title { min-height: 22px; padding: 2px 0; font-size: 13px; }
.character-dock #dock-inventory { grid-template-columns: repeat(2,30px); justify-content: center; padding: 22px 0 0; gap: 2px; }
.character-dock .dock-skills-panel {
  height: 170px; min-height: 170px; padding: 21px 11px 23px;
  background-image: url('assets/uo/classic-ui/gump-0820.png'),url('assets/uo/classic-ui/gump-0823.png'),url('assets/uo/classic-ui/gump-0821.png');
  background-position: center top,center bottom,center;
  background-size: 100% 24px,100% 20px,calc(100% - 14px) 100%;
  background-repeat: no-repeat;
}
.character-dock .dock-skills-panel :is(.dock-section-title,.dock-skill,.dock-skill-total,.text-button) { color: #29230e; text-shadow: none; }
.character-dock .dock-skills-panel .dock-section-title { min-height: 20px; margin-top: -18px; margin-bottom: 7px; font-size: 14px; }
.character-dock #dock-skills .dock-skill { min-height: 20px; padding: 1px 0; font-size: 12px; line-height: 1.3; }
.character-dock #dock-skills .dock-skill { color: #29230e; border-bottom-color: #7c70462e; }
.character-dock #dock-skills { max-height: 125px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #88713d #c8b775; }
.character-dock #dock-skills .text-button { min-height: 23px; font-size: 11px; padding: 3px 0; }

/* Only opened menus carry the large floral stone frame. */
.screen-sub { top: 14px; left: 12px; width: min(820px,calc(100vw - var(--dock-width) - 24px)); max-height: calc(100dvh - 58px); }
.toast-region { bottom: 40px; }
.screen-sub .journey-route { list-style: none; margin: 8px 0 16px; padding: 0; }
.screen-sub .journey-route li {
  display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center;
  gap: 10px; padding: 12px 4px; border-bottom: 1px solid #73745e;
}
.screen-sub .journey-route li > span { color: #343e24; text-align: center; font-size: 19px; }
.screen-sub .journey-route li > div { display: flex; flex-direction: column; gap: 4px; }
.screen-sub .journey-route strong { font-size: 19px; font-weight: normal; }
.screen-sub .journey-route small { font-size: 15px; }
.screen-sub .journey-route li[aria-current=step] { background: #d3d5bd77; box-shadow: inset 3px 0 #4d6036; }
.screen-sub .journey-route button {
  min-height: 30px; padding: 4px 6px 4px 25px; border: 0; color: #243218;
  background: var(--gump-arrow) 2px center / 19px 21px no-repeat; font-size: 16px;
}

@media (min-width:1550px) {
  :root { --dock-width: 320px; }
  .character-dock { padding-inline: 20px; }
}
@media (min-width:621px) and (max-width:1000px) {
  :root { --dock-width: 270px; }
  .character-dock { padding-inline: 4px; }
  .character-dock .paperdoll { width: 252px; height: 312px; background-size: 252px 312px; }
  .character-dock #paperdoll-avatar { left: 20px; top: 39px; width: 144px; height: 206px; }
  .character-dock .paperdoll-buttons { top: 37px; right: 8px; width: 63px; gap: 4px; }
  .character-dock .paperdoll-buttons button, .character-dock .paperdoll-buttons .class-change { height: 21px; min-height: 21px; font-size: 11px; }
  .side-nav .nav-item, .side-nav.more-open > .nav-primary, .side-nav.more-open > .nav-more { font-size: 12px; padding-inline: 3px; }
  .screen-battle .skill-meta strong { font-size: 13px; }
  .screen-battle .battle-feed { font-size: 12px; }
}
@media (max-width:620px) {
  :root { --dock-width: 0px; }
  .app-shell { height: auto; min-height: 100dvh; }
  .app-body { display: flex; flex-direction: column; height: auto; min-height: 100dvh; }
  .topbar { position: static; width: 100%; height: 25px; margin: 0; padding: 0 8px; }
  .topbar .top-resources { margin-left: auto; }
  .topbar .material-chip { display: flex; }
  .main-column { order: 0; width: 100%; padding: 3px 4px; overflow: visible; }
  .screen-battle .game-layout > .right-column { display: block; }
  .screen-battle .game-layout > .right-column > section { width: 100%; margin-bottom: 8px; }
  .world-card canvas { height: min(64dvh,540px); min-height: 320px; }
  .side-nav, .side-nav.more-open { order: 1; position: sticky; bottom: 0; top: auto; min-height: 34px; height: 34px; padding: 2px 4px 4px; }
  .side-nav .nav-item, .side-nav.more-open > .nav-primary, .side-nav.more-open > .nav-more { flex-direction: row; height: 28px; min-height: 28px; font-size: 11px; padding-inline: 2px; }
  .side-nav .secondary-nav { width: min(400px,calc(100vw - 10px)); bottom: 38px; right: 4px; }
  .character-dock { order: 2; width: 100%; padding: 8px 12px 16px; overflow: visible; }
  .character-dock .hero-panel { max-width: 300px; margin: 0 auto; }
  .character-dock .paperdoll { width: 262px; height: 324px; background-size: 262px 324px; }
  .character-dock .paperdoll-buttons { top: 39px; right: 8px; width: 66px; gap: 4px; }
  .character-dock #paperdoll-avatar { left: 21px; top: 41px; width: 150px; height: 214px; }
  .character-dock .paperdoll-buttons button, .character-dock .paperdoll-buttons .class-change { height: 22px; min-height: 22px; font-size: 12px; }
  .character-dock .stats-gump { height: 110px; }
  .character-dock .gump-vitals { top: 5px; left: 12px; right: 12px; }
  .character-dock .vital-row { flex-wrap: nowrap; height: 17px; }
  .character-dock .vital-row .meter { order: initial; flex-basis: auto; height: 7px; margin: 0; }
  .character-dock .hero-stats { grid-template-columns: repeat(4,1fr); }
  .character-dock .hero-stats span { font-size: 10px; }
  .character-dock .dock-extras { grid-template-columns: 100px minmax(0,1fr); }
  .character-dock .dock-skills-panel { display: block; }
  .screen-sub { top: 9px; left: 5px; right: 5px; width: auto; max-height: calc(100dvh - 52px); }
}

/* Latest reference: original retail paperdoll and compact THREE BLUE BARS.
   These replace the earlier ArchStone/DarkStats mod gumps at native 1:1. */
.character-dock .paperdoll {
  width: 262px; height: 324px;
  background: url('assets/uo/classic-hud/paperdoll.png') 0 0 / 262px 324px no-repeat;
  image-rendering: pixelated;
}
.character-dock #paperdoll-avatar { left: 21px; top: 19px; width: 155px; height: 237px; }
.character-dock .paperdoll-buttons {
  position: absolute; left: 185px; right: auto; top: 44px;
  display: block; width: 65px; height: 212px; gap: 0;
}
.character-dock .paperdoll-buttons > button,
.character-dock .paperdoll-buttons > .class-change {
  position: absolute; left: 0; top: calc(var(--native-row, 0) * 27px);
  display: block; width: 65px; height: 23px; min-height: 23px;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: transparent; font-size: 0;
  line-height: 0; box-shadow: none; text-shadow: none; cursor: pointer;
}
.character-dock .paperdoll-buttons > button:nth-child(1) { --native-row: 0; --native-hover: url('assets/uo/classic-hud/button-help-hover.png'); --native-pressed: url('assets/uo/classic-hud/button-help-pressed.png'); }
.character-dock .paperdoll-buttons > button:nth-child(2) { --native-row: 1; --native-hover: url('assets/uo/classic-hud/button-options-hover.png'); --native-pressed: url('assets/uo/classic-hud/button-options-pressed.png'); }
.character-dock .paperdoll-buttons > button:nth-child(3) { --native-row: 2; --native-hover: url('assets/uo/classic-hud/button-logout-hover.png'); --native-pressed: url('assets/uo/classic-hud/button-logout-pressed.png'); }
.character-dock .paperdoll-buttons > button:nth-child(4) { --native-row: 3; --native-hover: url('assets/uo/classic-hud/button-quests-hover.png'); --native-pressed: url('assets/uo/classic-hud/button-quests-pressed.png'); }
.character-dock .paperdoll-buttons > button:nth-child(5) { --native-row: 4; --native-hover: url('assets/uo/classic-hud/button-skills-hover.png'); --native-pressed: url('assets/uo/classic-hud/button-skills-pressed.png'); }
.character-dock .paperdoll-buttons > button:nth-child(6) { --native-row: 5; --native-hover: url('assets/uo/classic-hud/button-guild-hover.png'); --native-pressed: url('assets/uo/classic-hud/button-guild-pressed.png'); }
.character-dock .paperdoll-buttons > button:nth-child(7) { --native-row: 6; --native-hover: url('assets/uo/classic-hud/button-war-hover.png'); --native-pressed: url('assets/uo/classic-hud/button-war-pressed.png'); }
.character-dock .paperdoll-buttons > button:nth-child(8) { --native-row: 7; --native-hover: url('assets/uo/classic-hud/button-status-hover.png'); --native-pressed: url('assets/uo/classic-hud/button-status-pressed.png'); }
.character-dock .paperdoll-buttons > button:hover { background: var(--native-hover) left top / auto auto no-repeat; }
.character-dock .paperdoll-buttons > button:active { background-image: var(--native-pressed); }
.character-dock .paperdoll-buttons > button:focus-visible { outline: 1px dotted #f2df9f; outline-offset: 1px; }
.character-dock .paperdoll-name {
  /* As on the client paperdoll: name, then title, from the top-left of the plate. */
  top: 263px; bottom: auto; left: 24px; right: auto; width: 200px; height: 45px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 1px; line-height: 1.05; text-align: left;
}
.character-dock .paperdoll-name #edit-hero-name { padding: 0; text-align: left; }
.character-dock #edit-hero-name { color: #e4d09b; font-size: 14px; line-height: 1.1; }
.character-dock #paperdoll-title { color: #d2be91; font-size: 13px; line-height: 1.1; }
.character-dock .paperdoll-name small { color: #b8a98b; font-size: 10px; }
.character-dock #paperdoll-slots button {
  top: calc(70px + var(--slot-i) * 21px); left: calc(2px + var(--slot-side) * 160px);
  width: 19px; height: 20px;
}
.character-dock .stats-gump {
  position: relative; width: 154px; max-width: none; height: 64px;
  margin: 7px auto 4px; padding: 0; border: 0;
  background: url('assets/uo/classic-hud/healthbar-background.png') 0 0 / 154px 64px no-repeat;
  image-rendering: pixelated;
}
.character-dock .stats-gump .gump-vitals {
  position: static; width: 154px; height: 64px; padding: 0; margin: 0;
  background: transparent;
}
.character-dock .stats-gump .vital-row {
  position: absolute; left: 34px; right: auto; top: 12px;
  display: block; width: 109px; height: 11px; padding: 0; margin: 0;
}
.character-dock .stats-gump .vital-row:nth-child(2) { top: 25px; }
.character-dock .stats-gump .vital-row:nth-child(3) { top: 38px; }
.character-dock .stats-gump .vital-row > span,
.character-dock .stats-gump .vital-row > b,
.character-dock .stats-gump .hero-stats { display: none; }
.character-dock .stats-gump .vital-row .meter {
  position: static; display: block; width: 109px; height: 11px;
  padding: 0; margin: 0; border: 0; border-radius: 0; overflow: hidden;
  background: url('assets/uo/classic-hud/bar-red.png') left top / 109px 11px no-repeat;
}
.character-dock .stats-gump .meter > span {
  display: block; height: 11px; border: 0; border-radius: 0;
  background: url('assets/uo/classic-hud/bar-blue.png') left top / 109px 11px no-repeat;
  box-shadow: none; transition: none;
}
.character-dock #healthbar-name {
  position: absolute; top: -2px; left: 16px; width: 120px; height: 15px;
  color: #d3be82; font-size: 12px; line-height: 15px;
  overflow: hidden; white-space: nowrap; text-shadow: 1px 1px #343022;
}
.character-dock #status-hero-name {position:absolute;top:-2px;left:16px;width:120px;height:15px;color:#d3be82;font-size:12px;line-height:15px;overflow:hidden;white-space:nowrap;text-shadow:1px 1px #343022;}
.character-dock .hero-panel > .hero-stats {position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;width:262px;max-width:100%;margin:3px auto 5px;}
.character-dock .hero-panel > .hero-stats>div {min-height:28px;}
.character-dock .hero-panel > .hero-stats b {font-size:14px;}
.character-dock .hero-panel > .hero-stats,.character-dock .paperdoll-name small {display:none;}
.native-gold-pile {width:27px;height:20px;object-fit:contain;image-rendering:pixelated;flex-shrink:0;}
.resource-item-icon {width:32px;height:30px;object-fit:contain;image-rendering:pixelated;vertical-align:middle;}
.resource-stock li>span {display:flex;align-items:center;gap:8px;}
.native-cost {display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.native-cost img {width:27px;height:22px;object-fit:contain;image-rendering:pixelated;}
.topbar .resource-item-icon {width:24px;height:22px;}
.material-catalog {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 14px;margin-bottom:16px;}
.material-catalog>div {display:flex;align-items:center;gap:8px;min-height:40px;font-size:15px;}
.weapon-filters {display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;}
.weapon-filters label {display:flex;align-items:center;gap:8px;}
.weapon-filters input {width:210px;max-width:100%;}
.weapon-catalog {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:0 18px;}
.weapon-reference {display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;padding:12px 0;border-bottom:1px solid #737464;}
.weapon-reference img {width:46px;height:54px;object-fit:contain;image-rendering:pixelated;}
.weapon-reference>div {display:flex;flex-direction:column;gap:5px;}
.weapon-reference strong {font-size:19px;font-weight:normal;}.weapon-reference small,.weapon-reference span {font-size:15px;}
.topbar .top-resources {flex-wrap:wrap;justify-content:center;gap:3px 9px;}
@media(min-width:621px){.topbar{height:auto;min-height:25px;}.world-card canvas{height:calc(100dvh - 240px);}}
@media(min-width:621px){.world-card canvas{height:var(--world-available-height,calc(100dvh - 240px));}}

/* Responsive client pass: preserve native artwork sizes, let the available
   game window determine compact text layout, and keep commands reachable. */
.screen-battle .play-column { container-type: inline-size; }
.world-card { min-height: 0; }
.travel-progress-top > span { min-width: 0; overflow-wrap: anywhere; }
.travel-progress-top > b { flex-shrink: 0; }
.travel-progress-meter { width: 210px; max-width: 100%; }
.screen-sub .skill-book-row { grid-template-columns: minmax(0,1fr) 90px 124px; }
.screen-sub .skill-book-row > b { white-space: nowrap; }
.screen-sub .skill-mode select { padding-right: 25px; font-size: 16px; }
.screen-sub .weapon-filters label { flex-wrap: wrap; min-width: 0; }
.screen-sub .weapon-filters :is(input,select) { max-width: 100%; }
.screen-sub .inventory-toolbar select { min-width: 150px; padding-right: 25px; }
.screen-sub .inventory-toolbar label { flex-wrap: wrap; }
.screen-sub .journey-route li { min-width: 0; }
.screen-sub .journey-route li > div { min-width: 0; overflow-wrap: anywhere; }
#mobile-sheet-toggle, #mobile-sheet-close { display: none; }

@container (max-width: 740px) {
  .travel-progress { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .travel-progress-meter { width: 100%; }
  .travel-progress-meter span { background-size: max(210px, 100cqw) 100%; }
  .journey-prompt { gap: 5px 10px; }
  .journey-prompt > span { flex-basis: 100%; }
}
@container (max-width: 440px) {
  .screen-sub .skill-book-row { grid-template-columns: minmax(0,1fr) 90px; gap: 6px; }
  .screen-sub .skill-mode { grid-column: 1 / -1; justify-self: end; min-width: 124px; }
  .screen-sub .journey-route li { grid-template-columns: 24px minmax(0,1fr); }
  .screen-sub .journey-route li > button { grid-column: 2; justify-self: start; }
  .screen-sub .mage-spell-row select { max-width: 65%; }
}

@media (min-width: 621px) {
  .app-body { grid-template-rows: minmax(0,1fr) 40px; }
  .side-nav, .side-nav.more-open { min-height: 40px; height: 40px; }
  .side-nav .nav-item, .side-nav.more-open > .nav-primary, .side-nav.more-open > .nav-more { height: 34px; min-height: 34px; }
  .side-nav .secondary-nav { bottom: 44px; }
}
@media (max-width: 620px) {
  :root { --mobile-nav-height: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .app-shell { min-height: 100dvh; padding-bottom: var(--mobile-nav-height); }
  .app-body { min-height: 0; }
  .topbar { height: 26px; }
  .topbar .top-resources { gap: 3px 14px; }
  .main-column { padding-bottom: 8px; }
  .world-card canvas { height: clamp(240px,calc(100dvh - 410px),480px); min-height: 240px; }
  .world-topline { gap: 6px; align-items: flex-start; }
  .world-topline .zone-pill { max-width: calc(100% - 76px); white-space: normal; text-align: left; min-height: 44px; font-size: 14px; }
  #mobile-sheet-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 66px; min-height: 44px; padding: 5px 8px;
    color: #eedaa4; font-size: 15px; line-height: 1.2;
    border: 3px solid transparent; border-image: url('assets/uo/classic-ui/stone-alternate-border.png') 20 fill / 3px / 0 stretch;
    background: #080806db; cursor: pointer;
  }
  .travel-progress { padding: 5px 6px 2px; font-size: 14px; }
  .travel-progress small { font-size: 13px; line-height: 1.4; }
  .journey-prompt { min-height: 0; padding: 2px 6px; margin: 0; gap: 2px 8px; }
  .journey-prompt > span { min-width: 0; padding: 5px 8px; }
  .journey-prompt button { min-height: 44px; text-align: left; }
  .screen-battle .combat-controls-title { position: static; height: auto; min-height: 0; text-align: right; }
  .screen-battle .combat-controls-title .text-button { min-height: 44px; padding: 5px 8px; font-size: 14px; }
  .screen-battle .skill-row { width: 100%; gap: 4px; }
  .screen-battle .skill-card { min-height: 44px; height: 44px; }
  .screen-battle .skill-meta strong { font-size: 15px; }
  .screen-battle .battle-feed { font-size: 14px; min-height: 30px; }
  .screen-battle .battle-feed time { display: none; }
  .location-services button { min-height: 44px; font-size: 14px; }
  .side-nav, .side-nav.more-open {
    position: fixed; inset: auto 0 0; display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: 44px 44px;
    gap: 4px; min-height: var(--mobile-nav-height); height: var(--mobile-nav-height); max-height: none;
    flex-basis: auto; padding: 3px 4px calc(5px + env(safe-area-inset-bottom, 0px));
  }
  .side-nav .nav-item, .side-nav.more-open > .nav-primary, .side-nav.more-open > .nav-more {
    width: 100%; height: 44px; min-height: 44px; font-size: 14px; padding: 4px; margin: 0;
  }
  .side-nav .secondary-nav { bottom: calc(var(--mobile-nav-height) + 4px); max-height: calc(100dvh - var(--mobile-nav-height) - 16px); }
  .side-nav .secondary-nav .nav-item { height: auto; min-height: 44px; font-size: 17px; }
  .screen-sub { top: 6px; max-height: calc(100dvh - var(--mobile-nav-height) - 14px); }
  .screen-sub .hero-tabs button, .screen-sub .inline-action, .screen-sub .journey-route button { min-height: 44px; }
  .screen-sub :is(select,input:not([type=checkbox]):not([type=radio]):not([type=range])) { min-height: 44px; }
  .screen-sub .back-button { min-height: 44px; background-size: 58px 20px; }
  .character-dock { display: none; }
  .character-dock.mobile-open {
    display: block; position: fixed; z-index: 52; inset: 0 0 var(--mobile-nav-height) auto;
    width: min(328px,100%); height: auto; padding: 6px 14px 16px;
    overflow-y: auto; overscroll-behavior: contain; box-shadow: -12px 0 0 #000a;
  }
  #mobile-sheet-close {
    display: block; min-height: 44px; margin: 0 0 3px auto; padding: 7px 8px;
    color: #e5d1a3; font-size: 15px; background: transparent; border: 0; cursor: pointer;
  }
  .character-dock #dock-equip-best, .character-dock .music-controls summary, .character-dock .dock-section-title { min-height: 44px; }
  .character-dock .dock-skills-panel .dock-section-title { min-height: 20px; }
  .toast-region { bottom: calc(var(--mobile-nav-height) + 8px); }
}

/* ---- Responsive and proportions pass (25 Oct 2026) ----
   The hero is drawn at the centre of #world-canvas: nothing HTML may sit on
   that centre. Native gumps keep their pixel size; space is redistributed. */

/* Secondary menu: the native arrow needs its own gutter. styles.css carries a
   0,4,0 rule (padding:6px) that let the arrow eat the first letter. */
.side-nav.more-open .secondary-nav .nav-item,
.side-nav .secondary-nav .nav-item { padding: 4px 4px 4px 27px; background-position: 4px center; }

/* Overhead labels: UO shows the name only. Level and rank lines were extra
   HTML stacked around the hero, who is always at the centre. */
.scene-character-label .character-level,
.scene-enemy-label .enemy-rank,
.scene-enemy-label .enemy-level { display: none; }

/* Scene shout (VICTOIRE, CRITIQUE): above the hero name, not on the head. */
.world-toast { top: 17%; }

/* System messages: top-right corner of the map, outside its centre third,
   under the open menus (side-nav is z 40), at most two at once. */
.toast-region {
  z-index: 35; top: 44px; bottom: auto; left: auto;
  right: calc(var(--dock-width) + 16px);
  width: min(340px, calc((100vw - var(--dock-width)) * .3)); max-width: none;
  align-items: stretch;
}
.toast-region .toast { padding: 6px 10px; font-size: 14px; line-height: 1.35; }
.toast-region .toast:nth-last-child(n+3) { display: none; }

/* Backpack gump and pouches: see "Native containers" at the end of this file. */

/* Dock bag preview: the empty label goes under the image, not across it. */
.character-dock #dock-inventory:has(.dock-bag-empty) { display: block; padding-top: 0; }
.character-dock .dock-bag-empty {
  display: block; width: auto; height: auto; margin: 0; padding: 92px 0 0;
  color: #b9aa87; font-size: 12px; line-height: 1.2; text-align: center;
}

/* Skills scroll: the middle 0x0821 tiles vertically like the client, and the
   list stops above the bottom roll instead of being cut by it. */
.character-dock .dock-skills-panel {
  background-size: 100% 24px, 100% 20px, calc(100% - 14px) auto;
  background-repeat: no-repeat, no-repeat, repeat-y;
  padding-bottom: 27px;
}
.character-dock #dock-skills { padding-bottom: 12px; -webkit-mask-image: linear-gradient(#000 calc(100% - 12px), #0000); mask-image: linear-gradient(#000 calc(100% - 12px), #0000); }

/* Desktop dock: a column whose skills scroll takes all remaining height
   instead of leaving black space under it on tall screens. */
@media (min-width: 621px) {
  .character-dock { display: flex; flex-direction: column; }
  .character-dock .hero-panel { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
  .character-dock .dock-extras { flex: 1 1 auto; min-height: 150px; align-items: stretch; }
  .character-dock .dock-skills-panel { display: flex; flex-direction: column; height: auto; min-height: 170px; }
  .character-dock #dock-skills { flex: 1 1 0; min-height: 0; max-height: none; }
}
/* Tall landscape screens: the bag preview becomes the native 230 x 204 gump
   and the skills scroll runs full width beneath it. */
@media (min-width: 1001px) and (min-height: 940px) and (orientation: landscape) {
  .character-dock .dock-extras { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(170px,1fr); gap: 4px; }
  /* The retail gump itself is drawn by .dock-backpack (Native containers). */
  .character-dock .dock-bag { width: 230px; min-height: 226px; margin: 0 auto; }
}

/* Portrait tablets: a two-column desktop made the map 480 x 720 beside a
   paperdoll. The map now spans the width and the gumps sit in a band below. */
@media (min-width: 621px) and (max-width: 1100px) and (orientation: portrait) and (min-height: 860px) {
  :root { --dock-width: 0px; }
  .app-body { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto 40px; }
  .main-column { grid-column: 1; grid-row: 1; padding-right: 6px; }
  .character-dock {
    grid-column: 1; grid-row: 2; display: block; width: 100%; height: auto;
    height: 336px; padding: 4px 10px 8px; overflow: hidden; border-top: 1px solid #3a3528;
  }
  .character-dock .hero-panel { display: grid; grid-template-columns: 262px minmax(0,1fr); column-gap: 14px; align-items: start; grid-auto-flow: row dense; }
  .character-dock .hero-panel > * { grid-column: 2; }
  .character-dock .hero-panel > .paperdoll { grid-column: 1; grid-row: 1 / span 9; margin: 0; }
  .character-dock .stats-gump { margin: 2px 0 4px; }
  .character-dock .hero-panel > :is(.level-line,.xp-meter,#dock-equip-best) { width: auto; margin-inline: 0; }
  .character-dock .dock-extras { grid-template-columns: 96px minmax(0,1fr); }
  .character-dock .dock-skills-panel { height: 160px; min-height: 160px; }
  .character-dock #dock-skills { max-height: 112px; }
  .side-nav, .side-nav.more-open { grid-column: 1; grid-row: 3; }
  /* Resources sit level with the health gump, right of it. */
  .topbar { right: 10px; bottom: calc(40px + 336px - 50px); width: auto; }
  .journey-prompt > span { flex: 1 1 260px; }
}

/* Phone: the native health gump (154 x 64) is the first thing on screen,
   beside the resources; the combat strip is packed so that the tactics and the
   journal line sit above the fixed command bar without scrolling. */
@media (max-width: 620px) {
  .app-shell { position: relative; }
  .topbar { height: 68px; align-items: center; justify-content: flex-end; padding: 0 8px 0 168px; }
  .topbar .top-resources { margin-left: 0; justify-content: flex-end; }
  .character-dock:not(.mobile-open) {
    display: block; position: absolute; z-index: 20; top: 2px; left: 6px;
    width: 154px; height: 64px; padding: 0; overflow: visible; background: transparent; box-shadow: none;
  }
  .character-dock:not(.mobile-open) > :not(.hero-panel),
  .character-dock:not(.mobile-open) .hero-panel > :not(.stats-gump),
  .character-dock:not(.mobile-open) #mobile-sheet-close { display: none; }
  .character-dock:not(.mobile-open) .hero-panel { max-width: none; margin: 0; padding: 0; }
  .character-dock:not(.mobile-open) .stats-gump { margin: 0; }
  .world-card canvas { height: clamp(240px, calc(100dvh - 460px), 480px); }
  .journey-prompt { flex-wrap: wrap; }
  .journey-prompt button { flex: 1 1 0; min-width: 0; font-size: 13px; line-height: 1.15; }
  .screen-battle .combat-controls-title { position: absolute; right: 0; top: auto; bottom: 0; z-index: 1; height: 44px; }
  .screen-battle .battle-feed { display: flex; align-items: center; min-height: 44px; padding-right: 96px; }
  .toast-region { top: 72px; right: 8px; left: 8px; width: auto; bottom: auto; }
}

/* Feature gates (feature-gates.js): progressive discovery. Hidden entries
   leave the layout; native paperdoll buttons and the zone pill keep their
   place and are only locked. */
[data-fg-state="hidden"] { display: none !important; }
[data-fg-state="locked"] { cursor: not-allowed !important; pointer-events: none; }
/* The paperdoll buttons are transparent hotspots over the gump art: dim the art beneath. */
.character-dock .paperdoll-buttons > button[data-fg-state="locked"] { background: #000000a6; border-radius: 9px; }
.zone-pill[data-fg-state="locked"] { opacity: 1; filter: none; }
.zone-pill[data-fg-state="locked"] .zone-spark { display: none; }

/* ClassicUO PaperdollGump uses hue 0x0386 for both name and title.
   The native palette spans #181818..#5a5a5a; use its dark ink for these
   monochrome web glyphs. Notoriety blue remains on names in the world. */
.character-dock #edit-hero-name { color: #181818; text-shadow: none; font-size: 19px; }
.character-dock #edit-hero-name > span[aria-hidden] { color: #181818; font-size: 12px; text-shadow: none; }
.character-dock #paperdoll-title,
.character-dock #paperdoll-title.untitled { color: #181818; font-size: 18px; text-shadow: none; opacity: 1; }
.start-adventure-form { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; margin: 14px 0 6px; }
.start-adventure-form label { grid-column: 1 / -1; font-size: 13px; }
.start-adventure-form input { min-width: 0; height: 40px; padding: 0 10px; font: 18px "UO Unicode", serif; color: #31deee; background: #120f0a; border: 2px solid #6d5d3d; }
.start-adventure-form input:focus-visible { outline: 1px dotted #f2df9f; outline-offset: 2px; }
.start-adventure-button { height: 40px; padding: 0 14px; }
.start-adventure-error { grid-column: 1 / -1; margin: 0; color: #ee315a; font-size: 13px; }

/* Native containers (bag-layout.js). The retail gump 0x003C (230 x 204) is
   drawn at x2, or x1.5 when x2 does not fit; --u is one native pixel. Item art
   keeps native pixels and stays inside x 44..186, y 65..159 (ClassicUO
   ContainerManager). A pouch (art 0x0E79) opens the same gump, as on a server
   (ServUO containers.cfg). No grid: free positions, overlap, stacking order. */
.screen-sub .inventory-gump { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; position: relative; grid-template-columns: none; }
.screen-sub .inventory-gump > :not(.bag-stage) { flex: 1 1 240px; min-width: 0; }
.bag-stage {
  --u: 2px; position: relative; flex: 0 0 auto; width: calc(230 * var(--u));
  margin-inline: min(0px, calc((100% - 230 * var(--u)) / 2));
}
.uo-container {
  position: relative; width: calc(230 * var(--u)); height: calc(204 * var(--u));
  background: url('assets/uo/classic-hud/container-003c.png') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.uo-backpack { z-index: 1; }
.uo-container.drag-source { z-index: 300 !important; }
.uo-container-surface {
  position: absolute; left: calc(44 * var(--u)); top: calc(65 * var(--u));
  width: calc(142 * var(--u)); height: calc(94 * var(--u));
}
.pouch-gump {
  position: absolute; left: calc(var(--gx, 36) * var(--u)); top: calc(var(--gy, 28) * var(--u));
  cursor: move; touch-action: none; filter: drop-shadow(2px 3px 3px #000a);
}
.pouch-gump[hidden] { display: none; }
.uo-container-surface .bag-object {
  position: absolute; display: block; width: calc(var(--iw, 32) * var(--u)); height: calc(var(--ih, 32) * var(--u));
  min-width: 0; min-height: 0; max-width: none; max-height: none; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; overflow: hidden;
  transform: translate(-50%, -50%); cursor: grab; outline: none;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
/* Without fallback, an unmeasured image keeps its own size instead of a square. */
.uo-container-surface .bag-object img {
  position: absolute; left: calc(var(--ix, 0) * var(--u) * -1); top: calc(var(--iy, 0) * var(--u) * -1);
  width: calc(var(--nw) * var(--u)); height: calc(var(--nh) * var(--u));
  min-width: 0; min-height: 0; max-width: none; max-height: none; object-fit: fill;
  image-rendering: pixelated; pointer-events: none; -webkit-user-drag: none;
}
.uo-container-surface .bag-object:hover { filter: brightness(1.18); }
.uo-container-surface .bag-object.selected,
.uo-container-surface .bag-object:focus-visible { outline: 1px dotted #f3dd9c; outline-offset: 1px; }
.uo-container-surface .bag-object.bag-dragging { cursor: grabbing; z-index: 1000001 !important; filter: drop-shadow(2px 3px 2px #000b); }
.uo-container-surface .bag-object :is(.worn-mark, .upgrade-mark) {
  position: absolute; right: 0; top: 0; font-size: 10px; line-height: 1; pointer-events: none;
}
.uo-container-surface .worn-mark { color: #f4edcf; text-shadow: 1px 1px #000; }
.uo-container-surface .upgrade-mark { color: #b9f08a; text-shadow: 1px 1px 0 #000; }
.uo-container-surface .bag-empty {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  color: #e3d5ae; font-size: 13px; text-shadow: 1px 1px #000;
}
.bag-stage .bag-legend { position: static; margin: 6px 0 0; font-size: 11px; line-height: 1.4; text-align: center; color: #261909; }

/* Dock preview: the same backpack and positions, uniformly shrunk to the
   column (never stretched); integer x1 on tall screens. */
.character-dock .dock-bag { background: none; container-type: inline-size; }
.character-dock #dock-inventory { display: block; min-height: 0; padding: 2px 0 0; }
.character-dock .dock-backpack { --u: min(1px, calc(100cqw / 230)); margin: 0 auto; image-rendering: auto; }
.character-dock #dock-inventory .uo-container-surface .bag-object {
  position: absolute; display: block; padding: 0; border: 0; background: none; cursor: pointer;
  width: calc(var(--iw, 32) * var(--u)); height: calc(var(--ih, 32) * var(--u));
}
.character-dock #dock-inventory .uo-container-surface .bag-object img { max-width: none; max-height: none; image-rendering: auto; }
.character-dock #dock-inventory .uo-container-surface .bag-object:focus-visible { outline: 1px dotted #f3dd9c; }
.character-dock .dock-bag-empty { padding: 4px 0 0; }
@media (min-width: 1001px) and (min-height: 940px) and (orientation: landscape) {
  .character-dock .dock-backpack, .character-dock #dock-inventory .uo-container-surface .bag-object img { image-rendering: pixelated; }
}
/* Overhead name of the hero: innocent notoriety hue 0x59, separate from paperdoll ink. */
.scene-character-label .character-name { color: #31deee; text-shadow: 1px 1px 0 #000, 0 0 3px #000; }

/* Run roguelite : bandeau sous la carte, cartes de montée de niveau dans une
   fenêtre de pierre native au-dessus de la scène, écran « Run et cartes ». */
.run-active [data-equip-best] { display: none !important; }
.run-panel { padding: 4px 8px 2px; color: #d3c39a; font-size: 15px; line-height: 1.25; display: grid; gap: 4px; }
.run-panel[hidden] { display: none; }
.run-panel-top { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: center; }
.run-panel-top b { font-weight: normal; color: #f1dfa9; }
.run-panel small { color: #b9ac8b; font-size: 13px; }
.run-panel .run-meter { width: 210px; max-width: 100%; }
.run-chips { display: flex; flex-wrap: wrap; gap: 3px 6px; }
.run-chip {
  padding: 2px 9px; color: #29220f; font-size: 13px; white-space: nowrap;
  background: url('assets/uo/classic-ui/gump-0821.png') center / 100% 100% no-repeat;
}
.run-chip b { font-weight: normal; color: #5b2c08; }
.run-chip.evolved b { color: #8a3d00; }
.run-chip.empty { color: #5d5641; }
.run-panel :is(.run-details, .run-waiting) {
  justify-self: start; min-height: 24px; padding: 2px 4px 2px 24px; border: 0;
  background: var(--gump-arrow) 1px center / 17px 19px no-repeat;
  color: #d9c79f; font-size: 14px; cursor: pointer; text-align: left;
}
.run-panel .run-waiting { color: #f4e2a8; }
.run-panel :is(.run-details, .run-waiting):hover { color: #fff2cb; text-decoration: underline; }

.run-offer {
  position: absolute; z-index: 7; left: 50%; top: 10px; transform: translateX(-50%);
  width: min(880px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow-y: auto;
  border: 32px solid transparent; border-image: var(--gump-frame) 44 fill / 44px / 0 repeat;
  background: #97998e var(--gump-stone) repeat; padding: 2px 6px 6px;
  color: var(--gump-ink); box-shadow: 5px 7px 0 #0009; font-size: 15px; line-height: 1.35;
  scrollbar-color: #a49156 #787a70;
}
.run-offer[hidden] { display: none; }
.run-offer header { display: grid; gap: 1px; margin-bottom: 8px; text-align: center; }
.run-offer header .eyebrow { color: #33352a; font-size: 13px; letter-spacing: 0; }
.run-offer header h2 { margin: 0; color: #10110c; font-size: 24px; font-weight: normal; }
.run-offer header p { margin: 0; color: #2c2d24; font-size: 14px; }
.run-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.run-card {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 9px 9px;
  border: 2px groove #b8b9aa; border-left: 5px solid #77776c; background: #a9ab9e66;
}
.run-card.rarity-rare { border-left-color: #2d4f9e; }
.run-card.rarity-epic { border-left-color: #6b3f8f; }
.run-card.rarity-legendary { border-left-color: #b5651d; }
.run-card.kind-evolution, .run-card.kind-synergy { border-left-color: #1f5e2b; background: #b3bda266; }
.run-card-kind { color: #3b3c31; font-size: 12px; }
.run-card h3 { margin: 0; color: #10110c; font-size: 19px; font-weight: normal; overflow-wrap: anywhere; }
.run-card.rarity-rare h3 { color: #1d3a7c; }
.run-card.rarity-epic h3 { color: #4f2770; }
.run-card.rarity-legendary h3 { color: #7d3e05; }
.run-card ul { margin: 0; padding-left: 16px; color: #191a13; font-size: 14px; }
.run-card-note, .run-card-synergy { margin: 0; color: #2f3025; font-size: 13px; }
.run-card-synergy { color: #1f5e2b; }
.run-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.run-tag { padding: 0 5px; border: 1px solid #6d7061; color: #2c2d24; font-size: 12px; }
.run-tag.match { border-color: #1f5e2b; background: #2c5733; color: #eef3d8; }
.run-pick {
  margin-top: auto; min-height: 30px; padding: 4px 8px; border: 2px outset #c4c5b4;
  background: #a7a99c var(--gump-stone) repeat; color: #10110c; font-size: 15px; cursor: pointer;
}
.run-pick:hover { background-color: #c5c7b5; }
.run-pick:active { border-style: inset; }
.run-offer footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 8px; }
.run-offer footer button {
  min-height: 26px; padding: 2px 4px 2px 24px; border: 0;
  background: var(--gump-arrow) 1px center / 17px 19px no-repeat;
  color: #171713; font-size: 15px; cursor: pointer;
}
.run-offer footer button:disabled { opacity: .55; cursor: default; }
.run-offer :is(button):focus-visible { outline: 2px dotted #243d1a; outline-offset: 2px; }

.screen-sub .run-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; margin: 8px 0; }
.screen-sub .run-columns h3 { margin: 4px 0; }
.screen-sub .run-list { margin: 0 0 8px; padding: 0; list-style: none; }
.screen-sub .run-list li { padding: 4px 0; border-bottom: 1px solid #6d7061; }
.screen-sub .run-list li:last-child { border-bottom: 0; }
.screen-sub .run-free { color: #4c4d43; }
.screen-sub .run-priorities { display: grid; gap: 4px; padding-left: 0; list-style: none; }
.screen-sub .run-priorities li { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 8px; }
.screen-sub .run-abandon-help { display: block; margin-top: 4px; }

@media (max-width: 760px) {
  .run-offer { top: 4px; width: calc(100% - 8px); max-height: calc(100% - 8px); border-width: 22px; border-image-width: 30px; }
  .run-cards { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .run-offer header h2 { font-size: 20px; }
  .screen-sub .run-columns { grid-template-columns: minmax(0, 1fr); }
  .run-panel { padding: 4px 6px 2px; font-size: 14px; }
  .run-pick { min-height: 44px; }
  .run-panel :is(.run-details, .run-waiting) { min-height: 44px; }
}

/* Fonctionnalités verrouillées : visibles, grisées, avec leur palier (feature-gates.js).
   Le clic affiche la condition au lieu d'ouvrir l'écran. */
[data-fg-state="locked"] { pointer-events: auto; cursor: help !important; }
:is(.nav-item, [data-hero-tab], [data-open-screen]):not(.paperdoll-buttons > button)[data-fg-state="locked"] {
  opacity: .68; filter: grayscale(1);
}
:is(.nav-item, [data-hero-tab], [data-open-screen]):not(.paperdoll-buttons > button):not(.zone-pill)[data-fg-state="locked"][data-fg-unlock]:not([data-fg-unlock=""])::after {
  content: attr(data-fg-unlock); margin-left: 6px; padding: 0 4px; border: 1px solid currentColor;
  font-size: 11px; line-height: 1.3; white-space: nowrap;
}
.side-nav .nav-item[data-fg-state="locked"] { flex-wrap: nowrap; }

/* Audit: preserve native art while giving text fields and transient windows room. */
.run-scroll-hint { display: none; }
#mobile-sheet-close { display: none; }
.save-status { position: fixed; z-index: 80; bottom: 8px; left: 8px; max-width: min(520px, calc(100vw - 16px)); padding: 10px 14px; background: #302719; border: 1px solid #cdb57b; color: #fff2cc; font: 15px/1.4 Arial, sans-serif; }
.save-status[hidden] { display: none; }
#offline-progress-backdrop { z-index: 100; }
#offline-progress { width: 100%; accent-color: #9d803c; }
@media (max-width: 620px) {
  .start-adventure-form { grid-template-columns: minmax(0,1fr); }
  .start-adventure-form input, .start-adventure-button { width: 100%; min-height: 44px; }
  .character-dock.mobile-open #mobile-sheet-close { display: block; position: sticky; top: 0; z-index: 5; background: #201e16; border: 1px solid #8a7951; }
  .character-dock.mobile-open :is(.music-body button, .music-body select, #hero-name-form button, #hero-name-form input, #hero-name-form select) { min-height: 44px; }
  .save-status { bottom: calc(var(--mobile-nav-height) + 8px); }
}
@media (max-width: 760px) {
  .run-offer header .run-scroll-hint { display: block; margin-top: 4px; font-weight: bold; }
}

/* Grimoire de run : rareté écrite, paliers et état lisibles sans survol. */
.run-spell { min-width: 0; align-content: start; border-left: 3px solid #5a594b; padding: 12px; }
.run-spell-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; justify-content: space-between; }
.run-spell-heading strong { font-size: 18px; }
.spell-rarity { white-space: nowrap; font-size: 14px; font-weight: bold; }
.run-spell.rarity-rare { border-left-color: #2d4f9e; }
.run-spell.rarity-epic { border-left-color: #6b3f8f; }
.run-spell.rarity-legendary { border-left-color: #965015; }
.run-spell.spell-locked { opacity: 1; background: #00000008; }
.run-spell .spell-live { min-height: 2.5em; }
#mage-summon-status:not(:empty) { border: 1px solid #6b754e; padding: 10px; margin: 10px 0; }
.run-companion { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.run-companion canvas { flex: 0 0 64px; width: 64px; height: 68px; image-rendering: pixelated; }
.run-companion span { min-width: 0; }
.run-spell, .spellbook-summary, #mage-summon-status, .mage-run-help {
  font-family: "UO Unicode", serif; font-size: 16px; letter-spacing: normal; line-height: 1.4;
}
.mage-run-help { margin-top: 16px; }
.mage-run-help summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.mage-run-help summary:focus-visible { outline: 2px solid #49391e; outline-offset: 3px; }

/* Grey engraved lettering on the original character name plate. */
.character-dock .paperdoll-name { display: block; width: 214px; height: 45px; line-height: 14px; overflow-wrap: anywhere; }
.character-dock .paperdoll-name #edit-hero-name,
.character-dock #paperdoll-title, .character-dock #paperdoll-title.untitled {
  display: inline; color: #3e3e37; font-size: 14px; line-height: 14px; font-weight: normal;
  letter-spacing: 0; text-shadow: 1px 1px 0 #c0c0b6; white-space: normal;
}
.character-dock #paperdoll-title, .character-dock #paperdoll-title.untitled { display: block; }
.character-dock #paperdoll-title:not(:empty)::before { content: none; }
.character-dock #edit-hero-name > span[aria-hidden] { display: none; }
.character-dock #edit-hero-name:focus-visible { outline: 1px dotted #39382e; outline-offset: 2px; }
.wardrobe-layout { display: grid; grid-template-columns: 155px minmax(0,1fr); gap: 18px; align-items: start; }
.wardrobe-layout figure { margin: 0; text-align: center; }
#wardrobe-preview { width: 155px; height: 237px; background: #050505; border: 2px groove #a6a697; image-rendering: pixelated; }
.wardrobe-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.wardrobe-controls fieldset { min-width: 0; display: grid; gap: 5px; padding: 10px; border: 2px groove #b2b2a0; }
.wardrobe-controls select { width: 100%; min-width: 0; min-height: 44px; }
.wardrobe-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wardrobe-actions button { min-height: 44px; }
@media(max-width:760px) { .wardrobe-layout { grid-template-columns: minmax(0,1fr); }.wardrobe-controls { grid-template-columns: minmax(0,1fr); } }

/* Resources have their own row: long balances cannot spill onto status gumps. */
.topbar .top-resources { width: 100%; min-width: 0; flex-wrap: wrap; gap: 3px 10px; }
.topbar .resource-chip { white-space: nowrap; max-width: 100%; }
@media(min-width:621px) {
  .topbar { right: 8px; bottom: 2px; width: calc(var(--dock-width) - 16px); height: 48px; max-height: 48px; align-items: center; }
  .topbar .resource-chip { font-size: 13px; }
  .character-dock { padding-bottom: 52px; }
}
@media(min-width:621px) and (max-width:1100px) and (orientation:portrait) and (min-height:860px) {
  .topbar { right: 10px; bottom: 376px; width: calc(100% - 20px); height: 42px; }
  .topbar .top-resources { justify-content: flex-end; }
  .main-column { padding-bottom: 44px; }
}
@media(max-width:620px) {
  .topbar { height: 82px; padding: 0 8px 0 170px; align-items: flex-start; }
  .topbar .top-resources { display: grid; grid-template-columns: minmax(0,1fr); justify-items: end; gap: 2px; }
  .topbar .resource-chip { font-size: 12px; min-height: 24px; }
  .topbar .resource-item-icon { width: 18px; height: 18px; }
}

/* Native target health gump 0x0804: neutral grey background and blue HP line. */
.scene-enemy-label { display: none !important; }
.world-card .enemy-health-track {
  position: absolute; left: auto !important; top: 12px !important; right: 12px; bottom: auto;
  width: 154px; max-width: none; height: 60px; transform: none; z-index: 6; padding: 0;
  background: url('assets/uo/classic-hud/gump-0804.png') no-repeat; border: 0; border-radius: 0; box-shadow: none;
  image-rendering: pixelated; overflow: hidden;
}
#target-health-name { position: absolute; top: 12px; left: 14px; width: 128px; color: #3e3e37; text-shadow: 1px 1px 0 #c0c0b6; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.target-health-meter { position: absolute; left: 34px; top: 38px; width: 109px; height: 11px; background: url('assets/uo/classic-hud/gump-0805.png') no-repeat; }
.target-health-meter .enemy-health-fill { position: static; height: 11px; max-width: 109px; background: url('assets/uo/classic-hud/gump-0806.png') left top / 109px 11px no-repeat; border: 0; box-shadow: none; border-radius: 0; }
.run-card { --reward-color: #666654; border: 2px solid var(--reward-color); }
.run-card.rarity-uncommon { --reward-color: #426d38; }
.run-card.rarity-rare { --reward-color: #2d4f9e; }
.run-card.rarity-epic { --reward-color: #6b3f8f; }
.run-card.rarity-legendary { --reward-color: #a25a12; }
.run-card[class*="rarity-"] { border-color: var(--reward-color); }
.run-offer header .run-scroll-hint { display: block; margin-top: 4px; }
.run-card-heading { display: flex; align-items: center; gap: 10px; margin: 10px 0; min-width: 0; }
.run-card-heading h3 { min-width: 0; overflow-wrap: anywhere; }
.run-card-art { width: 76px; height: 76px; flex: 0 0 76px; display: grid; place-items: center; border: 3px ridge var(--reward-color); background: #15150f; }
.run-card-art img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }