:root {
  color-scheme: dark;
  --night: #0d1412;
  --night-2: #111b17;
  --panel: #17211c;
  --panel-raised: #1d2a23;
  --panel-deep: #111a16;
  --line: rgba(210, 188, 128, .16);
  --line-strong: rgba(210, 188, 128, .28);
  --gold: #d4b66e;
  --gold-bright: #f0d995;
  --cream: #e8e0ca;
  --muted: #999783;
  --faint: #676f63;
  --green: #8ea47a;
  --green-bright: #b9d38f;
  --red: #c86e5f;
  --blue: #7d9d9b;
  --sans: 'DM Sans', 'Segoe UI', sans-serif;
  --serif: 'IM Fell English SC', Georgia, serif;
}

* { box-sizing: border-box; }

.skip-link { position: fixed; z-index: 120; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-160%); border: 2px solid var(--gold-bright); background: var(--panel); color: var(--cream); }
.skip-link:focus { transform: translateY(0); }

html { min-width: 320px; background: var(--night); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--cream);
  background:
    radial-gradient(ellipse at 48% -22%, rgba(66, 101, 74, .13), transparent 51%),
    linear-gradient(115deg, #0c1311 0%, #111916 46%, #101713 100%);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .01em;
}

button, select { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
button:disabled { opacity: .48; cursor: not-allowed; }

.app-shell { min-height: 100vh; }

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  align-items: center;
  height: 74px;
  padding: 0 30px;
  border-bottom: 1px solid rgba(211, 190, 134, .15);
  background: rgba(13, 20, 17, .94);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
  backdrop-filter: blur(15px);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 216px; color: var(--cream); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 40px; color: #e1c87e; border: 1px solid rgba(212, 182, 110, .54); clip-path: polygon(50% 0, 96% 18%, 88% 74%, 50% 100%, 12% 74%, 4% 18%); font: 22px var(--serif); text-shadow: 0 0 12px rgba(228, 190, 92, .6); }
.brand-wordmark { display: flex; flex-direction: column; gap: 2px; }
.brand-wordmark strong { font: 17px/1 var(--serif); letter-spacing: .16em; color: #e2d4ac; }
.brand-wordmark small { font-size: 8px; letter-spacing: .2em; color: #8e8a70; }
.realm-indicator { display: flex; align-items: center; gap: 9px; padding-left: 28px; color: #8c937f; font-size: 9px; letter-spacing: .16em; }
.pulse-dot, .live-indicator, .server-mark { width: 6px; height: 6px; border-radius: 50%; background: #93b877; box-shadow: 0 0 9px rgba(147, 184, 119, .8); }
.top-resources { display: flex; align-items: center; gap: 11px; margin-left: auto; }
.resource-chip { display: flex; align-items: center; gap: 7px; min-width: 106px; padding: 8px 11px; border: 1px solid rgba(206, 186, 128, .14); border-radius: 5px; background: linear-gradient(135deg, rgba(36, 47, 38, .75), rgba(17, 27, 22, .8)); color: #e7d6a3; font-weight: 700; font-size: 12px; }
.resource-chip small { margin-left: auto; color: #82816e; font-size: 8px; font-weight: 600; letter-spacing: .14em; }
.resource-glyph { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(218, 187, 105, .45); border-radius: 50%; color: var(--gold-bright); font-size: 13px; }
.essence-glyph { color: #b6cf9b; border-color: rgba(161, 194, 135, .5); }
.material-glyph { color: #d59b67; border-color: rgba(212, 139, 88, .45); font-size: 11px; }
.profile-button, .more-button { display: grid; place-items: center; cursor: pointer; background: none; border: 1px solid var(--line-strong); }
.profile-button { width: 36px; height: 36px; border-radius: 50%; }
.profile-sigil { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #4c674e; color: #ead8a3; font: 15px var(--serif); }

.app-body { display: flex; min-height: calc(100vh - 74px); }

.side-nav {
  position: sticky;
  top: 74px;
  display: flex;
  flex: 0 0 218px;
  flex-direction: column;
  align-self: flex-start;
  width: 218px;
  height: calc(100vh - 74px);
  min-height: 0;
  overflow-y: auto;
  padding: 26px 15px 17px;
  border-right: 1px solid rgba(211, 190, 134, .12);
  background: linear-gradient(180deg, rgba(17, 26, 22, .94), rgba(14, 21, 18, .9));
}
.nav-group-label { margin: 1px 11px 10px; color: #717b6b; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; height: 41px; margin: 1px 0; padding: 0 12px; cursor: pointer; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #a5a691; text-align: left; font-size: 11px; transition: background .18s, color .18s, border-color .18s; }
.nav-item:hover { color: var(--cream); background: rgba(197, 183, 126, .06); }
.nav-item:active, .inline-action:active, .departure-button:active, .primary-button:active { filter: brightness(1.17); }
.nav-item.active { color: #e5d4a4; border-color: rgba(211, 185, 114, .2); background: linear-gradient(90deg, rgba(127, 139, 87, .17), rgba(48, 64, 46, .12)); box-shadow: inset 2px 0 #c7a958; }
.nav-item.active .nav-icon { color: var(--gold-bright); }
.nav-indicator { position: absolute; right: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.nav-badge { display: grid; place-items: center; width: 17px; height: 17px; margin-left: auto; border: 1px solid rgba(206, 177, 104, .35); border-radius: 50%; color: var(--gold-bright); font-size: 9px; }
.nav-divider { height: 1px; margin: 17px 10px 17px; background: rgba(204, 189, 133, .11); }
.nav-icon { display: inline-block; width: 17px; height: 17px; flex: 0 0 17px; color: #82917d; opacity: .9; }
.icon-swords::before { content: '⚔'; font-size: 17px; }
.icon-map::before { content: '⌖'; font-size: 20px; line-height: 14px; }
.icon-gate::before { content: '⌑'; font-size: 20px; line-height: 14px; }
.icon-tower::before { content: '♜'; font-size: 16px; }
.icon-person::before { content: '♙'; font-size: 18px; }
.icon-shield::before { content: '◇'; font-size: 18px; }
.icon-anvil::before { content: '⌗'; font-size: 17px; }
.icon-paw::before { content: '◉'; font-size: 16px; }
.icon-book::before { content: '▤'; font-size: 16px; }
.icon-crown::before { content: '♛'; font-size: 16px; }
.icon-rune::before { content: '✧'; font-size: 18px; }
.icon-home::before { content: '⌂'; font-size: 18px; }
.icon-scroll::before { content: '▤'; font-size: 16px; }
.icon-arena::before { content: '◈'; font-size: 17px; }
.icon-worldboss::before { content: '✹'; font-size: 17px; }
.icon-more::before { content: '•••'; font-size: 12px; letter-spacing: .12em; }
.nav-more { display: none; }
.side-nav-foot { display: flex; align-items: center; gap: 8px; margin: auto 10px 4px; padding-top: 14px; border-top: 1px solid rgba(204, 189, 133, .11); color: #6c766b; font-size: 9px; }
.server-mark { width: 5px; height: 5px; }

.main-column { width: min(100%, 1550px); margin: 0 auto; padding: 27px 32px 40px; }
.screen { animation: screen-in .22s ease-out; }
.screen[hidden] { display: none; }
@keyframes screen-in { from { opacity: .72; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #a89d72; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.eyebrow-line { display: inline-block; width: 17px; height: 1px; background: #a68b4d; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 8px 0 5px; color: #ebe4cf; font: 25px/1.12 var(--serif); letter-spacing: .02em; }
.page-heading p { margin: 0; color: #929483; font-size: 11px; }
.weather-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(201, 185, 133, .15); border-radius: 3px; color: #868b78; font-size: 8px; font-weight: 600; letter-spacing: .14em; }
.weather-moon { color: #d7c481; font-size: 14px; }
.weather-divider { height: 13px; width: 1px; background: rgba(210, 188, 128, .22); }

.game-layout { display: grid; grid-template-columns: minmax(430px, 1.85fr) minmax(270px, .9fr); gap: 18px; align-items: start; }
.play-column, .right-column { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
.world-card { position: relative; overflow: hidden; min-height: 350px; border: 1px solid rgba(194, 175, 120, .45); border-radius: 5px; background: #172a21; box-shadow: 0 10px 35px rgba(0, 0, 0, .28), inset 0 0 0 4px rgba(13, 20, 17, .45); }
.world-card::before { position: absolute; z-index: 1; inset: 6px; border: 1px solid rgba(210, 188, 128, .16); content: ''; pointer-events: none; }
.world-card canvas { display: block; width: 100%; height: auto; min-height: 310px; background: #27352a; image-rendering: pixelated; }
.world-vignette { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 11, 8, .28), transparent 27%, transparent 68%, rgba(5, 10, 8, .48)); }
.world-frame-corner { position: absolute; z-index: 3; width: 17px; height: 17px; border-color: rgba(221, 195, 127, .72); border-style: solid; pointer-events: none; }
.corner-tl { top: 5px; left: 5px; border-width: 1px 0 0 1px; }
.corner-tr { top: 5px; right: 5px; border-width: 1px 1px 0 0; }
.world-topline, .world-bottomline { position: absolute; z-index: 4; right: 17px; left: 17px; display: flex; align-items: center; justify-content: space-between; color: rgba(229, 223, 190, .86); font-size: 8px; font-weight: 700; letter-spacing: .15em; pointer-events: none; }
.world-topline { top: 15px; }
.world-bottomline { bottom: 14px; color: rgba(219, 221, 192, .72); }
.zone-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(223, 203, 144, .22); border-radius: 3px; background: rgba(12, 22, 17, .53); }
.zone-spark { width: 5px; height: 5px; border-radius: 50%; background: #b9c78c; box-shadow: 0 0 7px rgba(173, 205, 124, .85); }
.region-readout { color: #c7bb8d; }
.region-readout i { display: inline-block; width: 20px; height: 1px; margin: 0 5px 3px; background: #a48f55; }
.scene-character-label, .scene-enemy-label { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 3px; text-shadow: 0 2px 5px #000; pointer-events: none; }
.scene-character-label { left: 33%; bottom: 27%; align-items: center; }
.scene-enemy-label { right: 21%; bottom: 31%; align-items: center; }
.character-name { color: #f1dfaa; font: 13px var(--serif); }
.character-level, .enemy-rank, .enemy-level { color: rgba(228, 221, 191, .75); font-size: 7px; letter-spacing: .12em; }
.enemy-rank { color: #e5b28c; }
.scene-enemy-label strong { color: #f1e1c1; font: 14px var(--serif); }
.enemy-health-track { position: absolute; z-index: 3; right: 19%; bottom: 25%; width: 110px; height: 4px; overflow: hidden; border: 1px solid rgba(20, 14, 14, .7); background: rgba(26, 18, 16, .68); }
.enemy-health-fill { width: 100%; height: 100%; background: linear-gradient(90deg, #913f37, #cf7660); transition: width .35s; }
.world-toast { position: absolute; z-index: 5; left: 50%; top: 47%; transform: translate(-50%, -50%); color: #f1d981; font: 18px var(--serif); opacity: 0; text-shadow: 0 2px 7px #090d0a, 0 0 15px rgba(232, 176, 67, .6); pointer-events: none; }
.world-toast.show { animation: damage-pop .95s ease-out both; }
@keyframes damage-pop { 0% { opacity: 0; transform: translate(-50%, -10%); } 20% { opacity: 1; transform: translate(-50%, -50%); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -120%); } }
.live-indicator { display: inline-block; width: 5px; height: 5px; margin-right: 6px; vertical-align: 1px; }
.world-bottomline b { color: #ecdaa6; }

.panel-card { border: 1px solid rgba(204, 187, 136, .16); border-radius: 4px; background: linear-gradient(145deg, rgba(29, 41, 33, .9), rgba(20, 30, 25, .94)); box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.combat-controls { padding: 3px 0 0; }
.combat-controls-title, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.combat-controls-title { margin-bottom: 9px; }
h2 { margin: 4px 0 0; color: #e7dfca; font: 16px/1.1 var(--serif); letter-spacing: .015em; }
.text-button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; cursor: pointer; border: 0; background: transparent; color: #b9ac79; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.text-button:hover { color: #efdda7; }
.text-button span { font-size: 13px; }
.skill-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skill-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 8px; cursor: pointer; border: 1px solid rgba(205, 188, 134, .13); border-radius: 4px; background: rgba(21, 31, 25, .65); text-align: left; transition: .18s; }
.skill-card:hover, .skill-card.skill-selected { border-color: rgba(204, 179, 104, .45); background: rgba(90, 80, 45, .14); }
.skill-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid rgba(203, 185, 128, .3); border-radius: 3px; color: #dbca8c; background: radial-gradient(circle, rgba(178, 143, 68, .18), transparent); font-size: 17px; }
.sigil-ember { color: #e9a26e; border-color: rgba(222, 144, 91, .38); }
.sigil-mend { color: #a2c88a; border-color: rgba(137, 181, 120, .38); }
.skill-meta { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.skill-meta strong { overflow: hidden; color: #dbd2ba; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.skill-meta small { overflow: hidden; color: #838878; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.skill-key { align-self: flex-start; margin-left: auto; color: #777c6c; font-size: 7px; letter-spacing: .1em; }
.battle-feed { display: flex; align-items: center; gap: 9px; min-height: 34px; margin-top: 8px; padding: 7px 10px; border: 1px solid rgba(197, 183, 132, .1); border-radius: 3px; background: rgba(18, 26, 22, .61); color: #9e9f89; font-size: 9px; }
.feed-icon { color: #b69b60; font-size: 14px; }
.battle-feed time { margin-left: auto; color: #687165; font-size: 7px; white-space: nowrap; }

.hero-panel, .expedition-panel { padding: 15px 15px 13px; }
.panel-heading { margin-bottom: 13px; }
.more-button { width: 27px; height: 26px; border-radius: 3px; color: #908d76; font-size: 10px; letter-spacing: 2px; }
.class-line { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid rgba(204, 187, 136, .12); }
.class-medallion { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(200, 168, 100, .38); border-radius: 50%; background: radial-gradient(circle, rgba(185, 148, 74, .2), rgba(18, 28, 22, .4)); color: #e2ca87; font: 19px var(--serif); }
.class-line > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.class-line b { color: #e0d6bb; font-size: 11px; font-weight: 600; }
.class-line small { color: #838879; font-size: 8px; }
.class-change { margin-left: auto; width: 27px; height: 27px; cursor: pointer; border: 1px solid var(--line); border-radius: 3px; background: rgba(8, 15, 12, .22); color: #c7b16f; font-size: 16px; }
.level-line, .vitality-title { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: #9a9b86; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.level-line b { color: #e3d6aa; }
.level-line span:last-child { font-size: 8px; font-weight: 500; letter-spacing: 0; }
.level-line span:last-child b { color: #d4c69d; }
.level-line span:last-child span { color: #7d8778; }
.meter { overflow: hidden; height: 5px; border: 1px solid rgba(7, 12, 10, .62); border-radius: 4px; background: #0d1511; }
.meter > span { display: block; height: 100%; width: 0; transition: width .4s; }
.xp-meter { margin-top: 6px; }
.xp-meter > span { background: linear-gradient(90deg, #9f8548, #d4b865); box-shadow: 0 0 8px rgba(207, 182, 94, .28); }
.vitality-block { margin-top: 13px; }
.vitality-title { margin: 0 0 6px; }
.vitality-title b { color: #c8c8ac; font-size: 9px; letter-spacing: 0; }
.vitality-title i { padding: 0 4px; color: #6e7466; font-style: normal; }
.hp-meter > span { background: linear-gradient(90deg, #526d45, #94b36e); box-shadow: 0 0 8px rgba(115, 164, 94, .25); }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 13px; }
.hero-stats div { display: flex; flex-direction: column; gap: 4px; padding: 7px 6px; border: 1px solid rgba(203, 188, 140, .11); border-radius: 3px; background: rgba(12, 19, 16, .26); text-align: center; }
.hero-stats span { color: #777e70; font-size: 7px; font-weight: 700; letter-spacing: .08em; }
.hero-stats b { color: #d7cba8; font: 14px var(--serif); }
.subtle-link { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 11px; padding: 4px 0 0; cursor: pointer; border: 0; border-top: 1px solid rgba(203, 188, 140, .1); background: transparent; color: #b8aa77; font-size: 8px; }
.subtle-link span { font-size: 13px; }

.expedition-panel { position: relative; }
.plan-sigil { color: #b7a66d; font: 21px var(--serif); }
.select-label { display: block; margin: 12px 0 6px; color: #8c907d; font-size: 7px; font-weight: 700; letter-spacing: .13em; }
#activity-choice { width: 100%; height: 33px; padding: 0 9px; border: 1px solid rgba(200, 184, 129, .19); border-radius: 3px; background: #121b16; color: #d9d2bc; font-size: 9px; }
.plan-footnote { display: flex; align-items: center; gap: 7px; margin: 9px 1px 11px; color: #83897a; font-size: 8px; }
.clock-icon { color: #c4aa67; font-size: 14px; }
.departure-button { display: flex; align-items: center; width: 100%; padding: 10px 11px; cursor: pointer; border: 1px solid rgba(212, 182, 110, .5); border-radius: 3px; background: linear-gradient(100deg, #76643d, #584b30 55%, #3c422e); color: #f2e2b4; text-align: left; box-shadow: inset 0 1px rgba(251, 228, 167, .11), 0 5px 15px rgba(0, 0, 0, .15); transition: .18s; }
.departure-button:hover { filter: brightness(1.13); box-shadow: 0 0 18px rgba(193, 165, 90, .16); }
.departure-icon { display: grid; place-items: center; width: 31px; height: 31px; margin-right: 10px; border: 1px solid rgba(239, 218, 157, .27); border-radius: 50%; font-size: 15px; }
.departure-button > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.departure-button b { font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.departure-button small { color: #ccbd91; font-size: 7px; }
.button-arrow { margin-left: auto; font-size: 15px; }
.full-width { justify-content: center; width: 100%; }

.objective-panel { padding: 13px 14px; border: 1px solid rgba(195, 143, 98, .18); border-radius: 4px; background: linear-gradient(120deg, rgba(57, 38, 29, .28), rgba(24, 31, 25, .5)); }
.objective-top { display: flex; align-items: center; justify-content: space-between; }
.objective-tag { padding: 3px 5px; border: 1px solid rgba(200, 124, 86, .4); border-radius: 2px; color: #d79a75; font-size: 7px; letter-spacing: .12em; }
.objective-content { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.boss-sigil { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(187, 122, 74, .28); border-radius: 3px; background: rgba(96, 49, 33, .18); color: #d59a62; font-size: 19px; }
.objective-content > div:last-child { display: flex; flex-direction: column; gap: 4px; }
.objective-content strong { color: #d8ccb2; font-size: 9px; font-weight: 600; }
.objective-content small { color: #8c8070; font-size: 7px; }
.objective-progress { height: 3px; margin-top: 11px; overflow: hidden; background: rgba(5, 10, 8, .7); }
.objective-progress span { display: block; width: 0; height: 100%; background: #bf8557; transition: width .3s; }
.objective-footer { display: flex; justify-content: space-between; margin-top: 6px; color: #827d6d; font-size: 7px; }
.objective-footer b { color: #c7a277; font-size: 7px; }

.lower-grid { display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(260px, 1fr); gap: 14px; margin-top: 15px; }
.loot-panel, .long-road { min-width: 0; padding: 14px 15px; }
.loot-panel .panel-heading, .long-road .panel-heading { margin-bottom: 11px; }
.loot-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.loot-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; cursor: pointer; border: 1px solid rgba(204, 187, 136, .13); border-radius: 3px; background: rgba(12, 20, 16, .35); text-align: left; }
.loot-item:hover { border-color: rgba(211, 185, 114, .42); background: rgba(51, 57, 38, .25); }
.loot-art { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border: 1px solid rgba(188, 162, 102, .2); border-radius: 3px; background: radial-gradient(circle, rgba(143, 122, 71, .2), rgba(21, 30, 24, .3)); color: #cfb56f; font-size: 18px; }
.icon-blade::before { content: '⚔'; }
.icon-cloak::before { content: '◒'; }
.icon-chest::before { content: '▣'; }
.loot-item > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.loot-item b { overflow: hidden; color: #d8d0b8; font-size: 8px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.loot-item small { overflow: hidden; color: #7f8878; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.loot-item i { margin-left: auto; color: #aa9b63; font-style: normal; font-size: 13px; }
.rarity-uncommon .loot-art { color: #92b394; border-color: rgba(110, 172, 125, .35); background: radial-gradient(circle, rgba(80, 128, 89, .27), rgba(21, 30, 24, .3)); }
.rarity-rare .loot-art { color: #8caee2; border-color: rgba(100, 146, 213, .45); background: radial-gradient(circle, rgba(60, 100, 165, .3), rgba(21, 30, 24, .3)); }
.rarity-epic .loot-art { color: #c48eda; border-color: rgba(181, 112, 208, .44); background: radial-gradient(circle, rgba(128, 69, 154, .27), rgba(21, 30, 24, .3)); }
.rarity-legendary .loot-art { color: #e9b75d; border-color: rgba(230, 177, 77, .48); background: radial-gradient(circle, rgba(164, 103, 43, .34), rgba(21, 30, 24, .3)); }
.empty-loot { opacity: .74; border-style: dashed; cursor: default; }
.road-icon { color: #b5a36b; font-size: 19px; }
.road-track { display: flex; align-items: flex-start; margin: 17px 1px 0; }
.road-step { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #717a6b; font-size: 7px; white-space: nowrap; }
.road-step span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(192, 183, 143, .2); border-radius: 50%; background: #18231c; color: #808576; font-size: 8px; }
.road-step.road-done span { border-color: rgba(132, 162, 106, .5); color: #b4cd8e; background: rgba(106, 142, 80, .15); }
.road-step.road-current span { border-color: rgba(212, 182, 110, .7); box-shadow: 0 0 10px rgba(198, 170, 97, .16); color: #f1d995; }
.road-step.road-current small { color: #c9b577; }
.road-line { flex: 1; height: 1px; min-width: 10px; margin: 11px 4px 0; background: rgba(181, 173, 133, .18); }
.road-line-done { background: linear-gradient(90deg, #819363, #8b8e68); }
.road-caption { margin: 12px 0 0; color: #858977; font-size: 8px; }

.sub-heading { margin-bottom: 22px; }
.back-button { padding: 9px 12px; cursor: pointer; border: 1px solid rgba(209, 187, 126, .22); border-radius: 3px; background: rgba(25, 34, 28, .8); color: #c9b77b; font-size: 9px; }
.back-button:hover { border-color: rgba(215, 190, 123, .5); color: #f0dfaa; }
.subscreen-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.subscreen-card { padding: 18px; border: 1px solid rgba(204, 187, 136, .16); border-radius: 4px; background: linear-gradient(145deg, rgba(29, 41, 33, .92), rgba(18, 28, 22, .95)); }
.subscreen-card.wide { grid-column: 1 / -1; }
.subscreen-card h2 { margin-bottom: 12px; }
.subscreen-card p { margin: 0; color: #969783; font-size: 10px; line-height: 1.65; }
.subscreen-card .card-kicker { display: block; margin: 0 0 7px; color: #a59a6b; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.subscreen-card button { cursor: pointer; border: 1px solid rgba(203, 180, 111, .35); border-radius: 3px; background: rgba(109, 91, 47, .22); color: #e1ce8e; }
.class-grid, .item-grid, .pet-grid, .zone-grid, .talent-grid, .collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.pet-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 12px 0; }
.pet-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.pet-controls .inline-action { flex: 1 1 auto; }
.choice-card, .item-card, .pet-card, .zone-card, .talent-card, .collection-card { display: flex; flex-direction: column; gap: 7px; min-height: 92px; padding: 11px; border: 1px solid rgba(204, 187, 136, .15); border-radius: 3px; background: rgba(12, 19, 16, .3); text-align: left; }
.quest-row { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid rgba(204, 187, 136, .1); }
.quest-row:last-child { border-bottom: 0; }
.quest-mark { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(205, 177, 103, .32); border-radius: 50%; color: var(--gold-bright); }
.quest-copy { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.quest-copy b, .arena-opponent b { color: #ddd4b6; font-size: 11px; }
.quest-copy small, .arena-opponent small { color: #91927d; font-size: 9px; line-height: 1.5; }
.arena-opponent { display: flex; align-items: center; gap: 11px; margin: 4px 0 12px; padding: 12px; border: 1px solid rgba(204, 188, 132, .13); border-radius: 4px; background: rgba(8, 14, 11, .24); }
.arena-opponent > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 5px; }
.worldboss-health { margin: 7px 0 14px; }
.choice-card b, .item-card b, .pet-card b, .zone-card b, .talent-card b, .collection-card b { color: #e0d6bb; font-size: 10px; }
.choice-card small, .item-card small, .pet-card small, .zone-card small, .talent-card small, .collection-card small { color: #89907e; font-size: 8px; line-height: 1.4; }
.choice-card.selected, .talent-card.learned { border-color: rgba(204, 179, 104, .45); background: rgba(94, 81, 48, .18); }
.choice-card-selected { border-color: rgba(140, 174, 123, .48); background: rgba(70, 104, 67, .16); }
.evolution-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.evolution-choices .choice-card { cursor: pointer; color: inherit; }
.capture-list li { flex-wrap: wrap; align-items: center; }
.capture-list .inline-action { margin-top: 0; }
.sub-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sub-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(204, 187, 136, .1); color: #b3b19a; font-size: 9px; }
.sub-list li:last-child { border-bottom: 0; }
.sub-list small { color: #828977; }
.inline-action { align-self: flex-start; margin-top: 4px; padding: 8px 11px; cursor: pointer; border: 1px solid rgba(203, 180, 111, .35); border-radius: 3px; background: rgba(109, 91, 47, .22); color: #e1ce8e; font-size: 9px; }
.inline-action:hover { background: rgba(135, 112, 54, .3); }
.reward-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.reward-pill { padding: 5px 8px; border: 1px solid rgba(203, 187, 131, .16); border-radius: 20px; color: #c2ba96; font-size: 8px; }
.progress-inline { height: 4px; margin-top: 5px; overflow: hidden; background: #0d1410; }
.progress-inline span { display: block; height: 100%; background: linear-gradient(90deg, #738a5f, #c5ae68); }
.rule-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(204, 187, 136, .1); color: #b3b19a; font-size: 9px; }
.toggle { position: relative; width: 32px; height: 18px; cursor: pointer; border: 1px solid rgba(179, 173, 137, .3); border-radius: 20px; background: #1a241e; }
.toggle::after { position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #898c77; content: ''; transition: .18s; }
.toggle.on { border-color: rgba(171, 195, 134, .5); background: rgba(90, 132, 79, .3); }
.toggle.on::after { left: 17px; background: #b9d38f; }

.modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(4, 9, 7, .8); backdrop-filter: blur(7px); }
.modal-backdrop[hidden] { display: none; }
.offline-modal { position: relative; width: min(100%, 470px); padding: 28px 30px 26px; border: 1px solid rgba(214, 186, 112, .48); border-radius: 5px; background: radial-gradient(ellipse at 50% 0, rgba(95, 91, 54, .19), transparent 44%), linear-gradient(145deg, #202b22, #121c17); box-shadow: 0 24px 80px rgba(0, 0, 0, .55), inset 0 0 0 4px rgba(8, 15, 11, .3); text-align: center; }
.modal-close { position: absolute; top: 10px; right: 12px; width: 27px; height: 27px; cursor: pointer; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #a9a087; font-size: 17px; }
.modal-sun { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 14px; border: 1px solid rgba(213, 182, 108, .42); border-radius: 50%; color: #e8ce7d; font-size: 23px; box-shadow: 0 0 25px rgba(201, 171, 98, .11); }
.offline-modal h2 { margin: 7px 0 6px; color: #eee3c5; font-size: 22px; }
.modal-lede { margin: 0 0 18px; color: #9d9f8c; font-size: 10px; }
.offline-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.offline-totals div { display: flex; flex-direction: column; gap: 6px; padding: 11px; border: 1px solid rgba(205, 188, 134, .13); border-radius: 3px; background: rgba(8, 14, 11, .24); }
.offline-totals span { color: #888b77; font-size: 7px; font-weight: 700; letter-spacing: .13em; }
.offline-totals b { color: #e0cc8a; font: 19px var(--serif); }
.offline-loot { display: flex; align-items: center; gap: 10px; margin: 11px 0 17px; padding: 9px; border: 1px solid rgba(207, 175, 102, .22); border-radius: 3px; background: rgba(108, 90, 46, .12); text-align: left; }
.offline-loot > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.offline-loot b { color: #dbd0ae; font-size: 9px; }
.offline-loot small { color: #91917d; font-size: 8px; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 12px; cursor: pointer; border: 1px solid rgba(220, 193, 123, .56); border-radius: 3px; background: linear-gradient(90deg, #806d42, #665735); color: #f2e4b8; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.primary-button:hover { filter: brightness(1.12); }
.primary-button span { font-size: 15px; }
.toast-region { position: fixed; z-index: 100; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 11px 14px; border: 1px solid rgba(207, 180, 109, .42); border-radius: 4px; background: rgba(24, 34, 27, .97); color: #e6d9b2; box-shadow: 0 10px 32px rgba(0,0,0,.35); animation: toast-in .2s ease-out; font-size: 10px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1550px) {
  .main-column { padding-right: 42px; padding-left: 42px; }
  .world-card canvas { max-height: 430px; }
}

@media (max-width: 1180px) {
  .side-nav { flex-basis: 190px; width: 190px; }
  .main-column { padding-right: 22px; padding-left: 22px; }
  .game-layout { grid-template-columns: minmax(390px, 1.45fr) minmax(260px, .9fr); gap: 12px; }
  .right-column, .play-column { gap: 11px; }
  .hero-panel, .expedition-panel { padding: 12px; }
}

@media (max-width: 960px) {
  .topbar { height: 66px; padding: 0 18px; }
  .brand { min-width: 190px; }
  .side-nav { position: fixed; z-index: 45; top: auto; right: 0; bottom: 0; left: 0; flex-direction: row; justify-content: space-around; width: 100%; height: 64px; max-height: 64px; min-height: 0; padding: 5px 9px calc(5px + env(safe-area-inset-bottom)); overflow: hidden; border-top: 1px solid rgba(211, 190, 134, .18); border-right: 0; background: rgba(13, 20, 17, .98); backdrop-filter: blur(12px); }
  .side-nav .nav-group-label, .side-nav .nav-divider, .side-nav-foot { display: none; }
  .side-nav .nav-item { display: none; }
  .side-nav .nav-item[data-screen="battle"], .side-nav .nav-item[data-screen="expeditions"], .side-nav .nav-item[data-screen="hero"], .side-nav .nav-item[data-screen="equipment"], .side-nav .nav-more { display: flex; }
  .nav-more { display: flex; }
  .nav-item { width: auto; min-width: 50px; height: 50px; flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 2px 3px; font-size: 9px; text-align: center; }
  .nav-item.active { box-shadow: inset 0 2px #c7a958; }
  .nav-icon { width: 16px; height: 16px; flex: 0 0 16px; font-size: 14px; }
  .nav-badge { position: absolute; top: 1px; right: calc(50% - 22px); width: 14px; height: 14px; font-size: 8px; }
  .app-body { display: block; min-height: calc(100vh - 66px); }
  .main-column { padding: 23px 22px 78px; }
  .game-layout { grid-template-columns: minmax(0, 1.55fr) minmax(255px, .9fr); }
  .side-nav.more-open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; height: auto; max-height: min(68dvh, 560px); padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .side-nav.more-open .nav-group-label { display: block; grid-column: 1 / -1; margin: 5px 4px 0; }
  .side-nav.more-open .nav-divider { display: block; grid-column: 1 / -1; margin: 4px; }
  .side-nav.more-open .nav-item { display: flex; width: 100%; min-width: 0; min-height: 47px; height: auto; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 6px 8px; font-size: 10px; text-align: left; }
  .side-nav.more-open .nav-item.active { box-shadow: inset 2px 0 #c7a958; }
  .side-nav.more-open .nav-icon { flex: 0 0 16px; }
}

@media (max-width: 760px) {
  .realm-indicator { display: none; }
  .topbar { padding: 0 13px; }
  .brand { min-width: 0; }
  .brand-mark { width: 31px; height: 34px; font-size: 19px; }
  .brand-wordmark strong { font-size: 14px; }
  .brand-wordmark small { font-size: 7px; }
  .resource-chip { min-width: 74px; gap: 5px; padding: 6px 7px; font-size: 10px; }
  .resource-chip small { display: none; }
  .profile-button { width: 32px; height: 32px; }
  .profile-sigil { width: 23px; height: 23px; }
  .main-column { padding: 19px 14px 78px; }
  .page-heading { align-items: flex-start; margin-bottom: 16px; }
  h1 { font-size: 22px; }
  .page-heading p { max-width: 420px; line-height: 1.5; }
  .weather-chip { margin-top: 14px; white-space: nowrap; }
  .game-layout { grid-template-columns: 1fr; }
  .right-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .objective-panel { grid-column: 1 / -1; }
  .lower-grid { grid-template-columns: 1fr; }
  .world-card { min-height: 0; }
  .world-card canvas { min-height: 0; }
  .scene-character-label { left: 28%; bottom: 25%; }
  .scene-enemy-label { right: 15%; bottom: 30%; }
  .enemy-health-track { right: 13%; bottom: 24%; }
}

@media (max-width: 520px) {
  .brand-wordmark small { letter-spacing: .11em; }
  .top-resources { gap: 5px; }
  .resource-chip { min-width: auto; padding: 6px; }
  .resource-glyph { width: 16px; height: 16px; }
  .material-chip { display: none; }
  .weather-chip { display: none; }
  .page-heading { margin-bottom: 13px; }
  .game-layout { gap: 9px; }
  .world-card::before { inset: 4px; }
  .world-topline, .world-bottomline { right: 12px; left: 12px; font-size: 6px; }
  .world-topline { top: 11px; }
  .world-bottomline { bottom: 10px; }
  .zone-pill { padding: 4px 5px; }
  .region-readout i { width: 11px; }
  .scene-character-label { left: 20%; bottom: 23%; }
  .scene-enemy-label { right: 8%; bottom: 30%; }
  .scene-enemy-label strong { font-size: 11px; }
  .enemy-health-track { right: 8%; width: 82px; bottom: 24%; }
  .skill-row { grid-template-columns: 1fr; }
  .skill-card { padding: 7px 9px; }
  .skill-key { margin-right: 2px; }
  .right-column { grid-template-columns: 1fr; }
  .hero-panel, .expedition-panel { padding: 13px; }
  .loot-strip { grid-template-columns: 1fr; }
  .loot-item { min-height: 51px; }
  .subscreen-content { grid-template-columns: 1fr; }
  .subscreen-card.wide { grid-column: auto; }
  .quest-row { grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
  .quest-row .inline-action { grid-column: 2; justify-self: start; }
  .arena-opponent { flex-wrap: wrap; }
  .page-heading.sub-heading { align-items: flex-start; }
  .back-button { flex-shrink: 0; padding: 7px 8px; font-size: 8px; }
  .offline-modal { padding: 24px 17px 18px; }
  .offline-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evolution-choices { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .resource-chip { gap: 3px; }
  .resource-glyph { width: 14px; height: 14px; }
  .nav-item { min-width: 45px; font-size: 7px; }
  .nav-icon { width: 15px; height: 15px; flex-basis: 15px; }
  .side-nav.more-open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Classic client: the world stays central; character gumps stay at hand. */
:root {
  --night: #141311; --night-2:#191817; --panel:#282622; --panel-raised:#38332b; --panel-deep:#171615;
  --cream:#e1d4b3; --gold:#b49a68; --gold-bright:#ebd29a; --muted:#b6ab92;
  --line:#655c49; --line-strong:#8d7e60; --sans:Georgia,'Times New Roman',serif; --serif:Georgia,'Times New Roman',serif;
}
body { background:#171613; background-image:repeating-linear-gradient(1deg, transparent 0 3px,#00000012 3px 4px),radial-gradient(ellipse at 50% 0,#39352d,#161513 85%); font-size:13px; letter-spacing:0; color:var(--cream); }
.topbar { height:57px; padding:0 20px; border:3px solid #22221f; border-top-color:#747065; border-left-color:#57564e; background:linear-gradient(#49473f,#302f2a 48%,#211f1b); box-shadow:0 2px 0 #0a0a08,0 4px 0 #5c5646; backdrop-filter:none; }
.brand { min-width:250px; gap:10px; }
.brand-mark { width:32px; height:38px; border:0; color:#d7bb7e; clip-path:none; font-size:34px; text-shadow:2px 2px #080806,-1px -1px #b18d51; }
.brand-wordmark strong { font-size:19px; color:#e8d0a0; letter-spacing:.11em; text-shadow:2px 2px #171410; }
.brand-wordmark small { color:#c2b59a; font-size:9px; letter-spacing:.08em; }
.realm-indicator { padding-left:18px; font:11px Georgia,serif; letter-spacing:.05em; color:#b7aa8c; }
.pulse-dot { display:none; }
.resource-chip { min-width:105px; border:2px solid #191816; border-bottom-color:#666052; border-right-color:#5e594b; border-radius:0; background:#201f1a; font-size:14px; font-weight:400; color:#ead4a0; padding:5px 8px; }
.resource-chip small { color:#b9ab8a; font:10px Georgia,serif; letter-spacing:0; }
.resource-glyph { border:0; background:no-repeat center/contain; border-radius:0; width:22px; height:22px; font-size:0; }
.coin-glyph { background-image:url('assets/uo/gem.png'); filter:sepia(1) saturate(2); }
.essence-glyph { background-image:url('assets/uo/potion.png'); }
.material-glyph { background-image:url('assets/uo/sword.png'); }
.profile-button { display:none; }
.app-body { display:grid; grid-template-columns:284px minmax(0,1fr); grid-template-rows:48px 1fr; align-items:start; min-height:calc(100vh - 57px); }
.side-nav { grid-column:1/-1; position:relative; top:auto; width:auto; height:48px; flex-direction:row; align-self:stretch; align-items:center; padding:4px 14px; gap:5px; overflow:visible; border:0; border-bottom:2px solid #12110e; background:linear-gradient(#302b23,#1f1c17); box-shadow:inset 0 1px #665c49; z-index:40; }
.side-nav .nav-item { display:flex; flex:0 1 155px; width:auto; height:36px; min-height:36px; min-width:0; padding:5px 13px; margin:0; flex-direction:row; justify-content:center; gap:8px; color:#c5b794; font-size:13px; font-weight:400; text-align:left; border:2px solid #16130f; border-left-color:#5f5644; border-top-color:#74674e; border-radius:0; background:linear-gradient(#443b2d,#29241b); box-shadow:inset 0 0 0 1px #3e3527; }
.side-nav .nav-item:hover { color:#f1dfb1; background:linear-gradient(#65543a,#3c3020); }
.side-nav .nav-item.active { border-top-color:#17130b; border-left-color:#17130b; border-bottom-color:#9b8457; border-right-color:#9b8457; background:linear-gradient(#302718,#594629); color:#f3dfaa; box-shadow:inset 0 0 10px #100d07; }
.nav-icon { width:20px; height:23px; flex-basis:20px; color:#cdb680; opacity:1; background:no-repeat center/contain; image-rendering:pixelated; }
.nav-icon::before { content:none; }
.icon-swords { background-image:url('assets/uo/sword.png'); }.icon-person { background-image:url('assets/uo/book.png'); }.icon-shield { background-image:url('assets/uo/backpack.png'); }.icon-anvil { background-image:url('assets/uo/axe.png'); }.icon-book { background-image:url('assets/uo/book.png'); }.icon-map,.icon-scroll { background-image:url('assets/uo/parchment.png'); }.icon-paw { background-image:url('assets/uo/pet.png'); }.icon-rune,.icon-worldboss { background-image:url('assets/uo/gem.png'); }.icon-more::before { content:'≡'; font-size:23px; line-height:20px; }
.nav-badge { position:static; min-width:16px; width:auto; height:17px; padding:0 3px; background:#231b12; border-color:#7c6740; border-radius:0; font-size:10px; margin-left:0; }
.side-nav .nav-more { margin-left:auto; flex-basis:175px; }
.secondary-nav { display:none; position:absolute; right:14px; top:46px; width:330px; max-height:calc(100dvh - 130px); overflow:auto; padding:15px; background:#27251f url('assets/uo/dark-parchment.png') center/100% 100%; border:3px ridge #79725d; box-shadow:3px 8px 20px #000b; }
.side-nav.more-open { display:flex; height:48px; max-height:none; overflow:visible; padding:4px 14px; }
.side-nav.more-open .secondary-nav { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.side-nav.more-open .secondary-nav .nav-item { display:flex; min-height:39px; height:auto; width:100%; padding:6px; font-size:12px; justify-content:flex-start; }
.side-nav .nav-group-label,.side-nav.more-open .nav-group-label { display:block; grid-column:1/-1; margin:8px 0 1px; color:#d3be91; font-size:10px; letter-spacing:.08em; }
.character-dock { position:sticky; top:8px; width:284px; padding:8px 10px 12px; align-self:start; }
.hero-panel { padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.hero-panel .panel-heading { justify-content:center; text-align:center; margin:2px 0 7px; }
.hero-panel .eyebrow { display:none; }
.hero-panel h2 { font-size:18px; color:#dbcca9; text-shadow:1px 2px #000; }
.paperdoll { position:relative; width:262px; height:324px; margin:0 auto; background:url('assets/uo/paperdoll.png') no-repeat; image-rendering:pixelated; }
#paperdoll-avatar { position:absolute; left:21px; top:41px; width:150px; height:214px; image-rendering:pixelated; }
.paperdoll-buttons { position:absolute; right:8px; top:40px; display:flex; flex-direction:column; gap:5px; width:62px; }
.paperdoll-buttons button { height:22px; padding:0; cursor:pointer; border:0; border-radius:8px; color:#c9bd9d; font:11px Georgia,serif; text-shadow:1px 1px #000; background:none; }
.paperdoll-buttons button:hover { color:#fff0bf; background:#7f715529; }
.paperdoll-name { position:absolute; left:20px; right:20px; bottom:27px; text-align:center; color:#c6b99d; font-size:13px; }
.stats-gump { position:relative; width:262px; height:128px; margin:0 auto; background:url('assets/uo/stats.png') center/100% 100% no-repeat; image-rendering:pixelated; }
.gump-vitals { position:absolute; top:7px; left:12px; right:12px; padding:2px 0 4px; background:#08080b; }
.vital-row { display:flex; height:19px; align-items:center; gap:5px; font-size:11px; color:#d0c7ae; }
.vital-row>span { width:30px; }
.vital-row b { width:56px; text-align:right; font-weight:400; font-size:10px; }
.vital-row .meter { flex:1; margin:0; height:9px; border:1px solid #716650; border-radius:0; background:#050506; }
.meter span { border-radius:0; }
.hp-meter span { background:linear-gradient(#c03934,#76201e); }.mana-meter span { display:block; width:100%; height:100%; background:linear-gradient(#4a76b5,#243f7c); }.stamina-meter span { display:block; width:100%; height:100%; background:linear-gradient(#8ebd45,#456525); }
.hero-stats { position:absolute; bottom:7px; left:12px; right:12px; display:grid; grid-template-columns:repeat(4,1fr); padding:0; margin:0; border:0; gap:0; }
.hero-stats>div { min-height:42px; justify-content:flex-end; padding:4px 0 0; gap:3px; background:#07070bbb; }
.hero-stats span { color:#a9a38e; font-size:10px; letter-spacing:0; }.hero-stats b { color:#e4d1a8; font:14px Georgia,serif; }
.level-line { margin:7px 5px 4px; color:#b7ad96; font-size:11px; }
.xp-meter { height:7px; margin:0 5px; border:1px solid #716149; background:#080806; }.xp-meter span { background:linear-gradient(#c49c47,#766030); }
.build-actions { display:grid; grid-template-columns:1fr 1fr; margin:6px 5px 0; gap:5px; }
.subtle-link { display:block; border:1px solid #73664d; border-radius:0; padding:7px 2px; margin:0; background:linear-gradient(#393127,#211e18); color:#dcc697; font:11px Georgia,serif; text-align:center; }
.class-change { display:block; width:calc(100% - 10px); height:25px; margin:5px; border:1px solid #6e624b; background:#29251e; border-radius:0; color:#c8b690; font-size:11px; }
.local-save-note { margin:7px 0 0; text-align:center; font-size:10px; color:#968e7c; }
.main-column { width:100%; min-width:0; margin:0; padding:10px 14px 24px 4px; }
.page-heading { align-items:center; gap:10px; margin-bottom:9px; min-height:43px; }
.page-heading .eyebrow { font-size:9px; color:#aa9c7f; letter-spacing:.09em; }
h1 { margin:3px 0; font-size:23px; color:#e7d8b6; text-shadow:1px 2px #000; letter-spacing:0; }
.page-heading p { color:#aea38d; font-size:12px; line-height:1.4; }
.screen-battle>.page-heading p { display:none; }
.weather-chip { padding:6px 9px; font-size:9px; color:#c7b994; border:1px solid #665940; border-radius:0; background:#262219; letter-spacing:.05em; }
.eyebrow { color:#b2a07b; letter-spacing:.07em; font-size:10px; font-weight:400; }
.game-layout { display:flex; flex-direction:column; gap:10px; }
.play-column { width:100%; gap:9px; }
.world-card { min-height:0; width:100%; border:7px ridge #6a685b; border-radius:0; background:#1e211b; box-shadow:inset 0 0 0 2px #090a08,0 4px 10px #0009; }
.world-card::before { inset:0; border:1px solid #090a08; }
.world-card canvas { display:block; width:100%; height:clamp(330px, calc(100dvh - 286px), 560px); min-height:0; max-height:none; background:#303b26; }
.world-vignette { background:linear-gradient(#02040033,transparent 16%,transparent 83%,#02040088); }
.world-topline,.world-bottomline { left:12px; right:12px; font:10px Georgia,serif; color:#e0d6b7; letter-spacing:.04em; text-shadow:1px 1px #000; }
.world-topline { top:10px; }.world-bottomline { bottom:10px; }
.zone-pill { background:#171911d9; border:1px solid #776b4e; border-radius:0; padding:5px 7px; }.region-readout { color:#e1d0a3; }
.zone-spark,.live-indicator { background:#a6b96b; box-shadow:none; }.scene-character-label { left:36%; bottom:28%; }.scene-enemy-label { right:26%; bottom:30%; }.enemy-health-track { right:25%; bottom:25%; }
.character-name,.scene-enemy-label strong { font-size:14px; }.character-level,.enemy-rank,.enemy-level { font-size:9px; letter-spacing:.03em; }
.world-frame-corner { display:none; }
.combat-controls { padding:9px 10px 0; border:2px ridge #5c574a; background:#25231e; }
.combat-controls-title { margin-bottom:7px; }.combat-controls-title h2 { display:none; }.combat-controls-title .eyebrow { color:#c5b58e; font-size:11px; }
h2 { font:17px Georgia,serif; color:#dfcba0; letter-spacing:0; }.text-button { font:12px Georgia,serif; letter-spacing:0; color:#d0b57b; padding:0; }
.skill-row { gap:7px; }.skill-card { min-height:43px; padding:5px 8px; border:2px solid #171410; border-top-color:#75664c; border-left-color:#675b47; border-radius:0; background:linear-gradient(#484031,#2b251c); color:#d8c8a6; }
.skill-card.skill-selected { border-top-color:#14130d; border-left-color:#14130d; border-bottom-color:#ae9661; border-right-color:#ae9661; background:linear-gradient(#46371f,#6a5330); }.skill-card:hover { background:#5a4c33; }
.skill-icon { border:1px solid #8b7950; border-radius:0; width:29px; height:29px; flex-basis:29px; font-size:0; background:#1c1a14 no-repeat center/contain; image-rendering:pixelated; }.sigil-guard{background-image:url('assets/uo/sword.png');}.sigil-ember{background-image:url('assets/uo/book.png');}.sigil-mend{background-image:url('assets/uo/potion.png');}
.skill-meta strong { font-size:12px; color:#e3d3af; }.skill-meta small { font-size:10px; color:#c1b293; }.skill-key { font-size:10px; color:#b5a687; }
.battle-feed { min-height:26px; margin:4px -10px 0; padding:5px 9px; border:0; border-top:1px solid #5b503c; border-radius:0; background:#171611; color:#b6ac96; font-size:11px; }.battle-feed time { color:#9c947f; font-size:9px; }.feed-icon{display:none;}
.right-column { width:100%; display:grid; grid-template-columns:1.2fr 1fr; gap:10px; }
.panel-card:not(.hero-panel),.objective-panel,.subscreen-card { border:3px ridge #6c6250; border-radius:0; background:#26231d url('assets/uo/dark-parchment.png') center/100% 100%; box-shadow:1px 3px 6px #0008; }
.expedition-panel { padding:12px; }.panel-heading { margin-bottom:10px; }.panel-heading .eyebrow { margin-bottom:4px; }
.select-label { color:#b6a98e; font-size:10px; letter-spacing:.03em; }select{border:2px inset #7d6d4d;border-radius:0; background:#141411; color:#ddcfac; padding:8px; font-size:12px;}
.plan-footnote{font-size:11px;color:#b7ac94;}.departure-button{margin-top:8px;border:2px outset #8c7851;border-radius:0;background:linear-gradient(#5c4b31,#33291b);padding:8px;color:#e3cca0;}.departure-button b{font-size:12px;}.departure-button small{font-size:10px;color:#c3b38e;}.objective-panel{padding:12px;}.objective-content strong{font-size:14px;color:#e2cda3;}.objective-content small,.objective-footer{font-size:11px;color:#b4a88e;}.objective-tag{border-radius:0;color:#e5c48d;background:#32291b;border-color:#786443;}.objective-progress{background:#12110c;}.objective-progress span{background:#aa8240;}.boss-sigil{color:#b99c68;}
.lower-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;margin-top:10px;}.loot-panel,.long-road{padding:12px;}.loot-item{border-radius:0;background:#181611aa;border:1px solid #66573d;}.loot-item b{font-size:12px;}.loot-item small{font-size:10px;}.loot-art{background-size:contain;background-repeat:no-repeat;background-position:center;image-rendering:pixelated;}.loot-art::before{content:none;}.icon-blade{background-image:url('assets/uo/sword.png');}.icon-cloak{background-image:url('assets/uo/book.png');}.icon-chest{background-image:url('assets/uo/backpack.png');}.road-caption{font-size:11px;color:#b6aa8c;}.road-step small{font-size:10px;}.road-step span{border-radius:0;}
.sub-heading { min-height:74px; margin-bottom:12px; }.subscreen-content{gap:12px;}.subscreen-card{padding:18px;}.subscreen-card p{color:#c4b79b;font-size:13px;line-height:1.5;}.subscreen-card h2{font-size:20px;}.subscreen-card .sub-list li,.subscreen-card .rule-row{font-size:13px;color:#d6c8a8;padding:10px 0;border-color:#63583f;}.sub-list small{font-size:11px;color:#ab9e82;}.inline-action,.back-button,.primary-button{padding:9px 12px;border:2px outset #85714b;border-radius:0;background:linear-gradient(#5a4930,#302719);color:#efdab0;font:12px Georgia,serif;}.reward-pill{border-radius:0;background:#18161077;border-color:#716044;font-size:11px;color:#cfbd96;}.sub-stat-grid div{border-radius:0;background:#14130f66;border-color:#6a5b40;}.sub-stat-grid span{font-size:10px;color:#b9aa8c;}.sub-stat-grid b{font-size:19px;color:#e5cea0;}.class-picker,.equipment-tile,.talent-tile,.pet-tile,.quest-row,.arena-opponent{border-radius:0;}.equipment-tile,.pet-tile,.talent-tile,.class-picker{background:#17161088;border-color:#756447;}.equipment-name,.talent-tile strong,.pet-tile strong{font-size:14px;}.equipment-meta,.equipment-tile p,.talent-tile small,.pet-tile small{font-size:12px;color:#beb091;}
.modal-backdrop{background:#080806d9;backdrop-filter:none;}.offline-modal{padding:32px;border:5px ridge #7d735e;border-radius:0;background:#27241f url('assets/uo/dark-parchment.png') center/100% 100%;}.offline-modal h2{font-size:26px;}.modal-lede{font-size:13px;color:#c6b99c;}.offline-totals div{border-radius:0;border-color:#786849;background:#17161066;}.offline-totals span{font-size:9px;color:#c1b18e;letter-spacing:0;}.offline-totals b{font-size:21px;color:#ead4a4;}.modal-sun{display:none;}.offline-loot{border-radius:0;}.offline-loot b{font-size:13px;}.offline-loot small{font-size:11px;color:#b7a98b;}.toast{background:#30291e;border:2px ridge #928062;border-radius:0;color:#ecd3a2;font-size:13px;}.toggle{border-radius:0;background:#171611;border-color:#7d6a4a;}.toggle.on{background:#39422b;}
@media(min-width:1550px){.main-column{padding:12px 20px 24px 6px;}.world-card canvas{max-height:none;}.app-body{grid-template-columns:298px minmax(0,1fr);}.character-dock{width:298px;padding-left:18px;padding-right:18px;}}
@media(max-width:1080px){.realm-indicator{display:none;}.app-body{grid-template-columns:276px minmax(0,1fr);}.character-dock{width:276px;padding-left:7px;padding-right:7px;}.main-column{padding-right:9px;}.side-nav .nav-item{font-size:12px;padding:5px 9px;}.skill-meta small{display:none;}.world-card canvas{height:clamp(320px,calc(100dvh - 285px),520px);}.right-column{grid-template-columns:1fr;}.weather-chip{display:none;}.lower-grid{grid-template-columns:1fr;}}
@media(max-width:760px){.topbar{height:54px;padding:0 9px;}.brand{min-width:0;}.brand-wordmark strong{font-size:15px;}.brand-wordmark small{font-size:7px;}.brand-mark{width:24px;font-size:28px;}.top-resources{gap:4px;}.resource-chip{min-width:0;padding:4px;font-size:12px;gap:2px;}.resource-chip small{display:none;}.app-body{grid-template-columns:224px minmax(0,1fr);grid-template-rows:49px auto;}.character-dock{width:224px;padding:8px 3px;position:sticky;top:0;}.hero-panel h2{font-size:16px;}.paperdoll{width:218px;height:270px;background-size:218px 270px;}#paperdoll-avatar{left:18px;top:35px;width:125px;height:178px;}.paperdoll-buttons{top:33px;right:7px;gap:4px;width:51px;}.paperdoll-buttons button{height:18.5px;font-size:9px;}.paperdoll-name{bottom:22px;font-size:11px;}.stats-gump{width:218px;}.vital-row b{width:48px;font-size:9px;}.hero-stats span{font-size:9px;}.main-column{padding:9px 8px 24px 3px;}.side-nav,.side-nav.more-open{position:relative;bottom:auto;left:auto;right:auto;top:auto;display:flex;justify-content:stretch;max-height:none;height:49px;padding:4px 6px;gap:3px;background:#29251c;backdrop-filter:none;}.side-nav .nav-item,.side-nav.more-open>.nav-item{display:flex;flex:1;min-width:0;min-height:39px;height:39px;justify-content:center;flex-direction:column;gap:0;font-size:10px;padding:2px;}.side-nav .nav-item .nav-icon{height:18px;width:18px;flex-basis:18px;}.side-nav .nav-more{margin-left:0;flex:1.2;}.secondary-nav{right:6px;width:320px;top:47px;}.side-nav.more-open .secondary-nav .nav-item{flex-direction:row;}.nav-badge{position:absolute;top:1px;right:4px;height:13px;font-size:8px;}.nav-icon{background-size:contain;}.page-heading{min-height:42px;margin-bottom:7px;}.page-heading .eyebrow{font-size:8px;}h1{font-size:18px;}.world-card{border-width:5px;}.world-card canvas{height:370px;}.world-topline,.world-bottomline{font-size:8px;left:7px;right:7px;}.region-readout{display:none;}.scene-character-label{left:26%;bottom:28%;}.scene-enemy-label{right:13%;bottom:32%;}.enemy-health-track{right:12%;bottom:26%;}.scene-enemy-label strong{font-size:11px;}.character-level,.enemy-rank,.enemy-level{font-size:7px;}.skill-row{grid-template-columns:1fr;gap:5px;}.skill-card{min-height:35px;padding:3px 6px;}.skill-meta small{display:block;font-size:9px;}.skill-icon{width:24px;height:24px;flex-basis:24px;}.combat-controls{padding:6px 7px 0;}.combat-controls-title{align-items:flex-start;}.combat-controls-title .eyebrow{font-size:9px;}.text-button{font-size:10px;}.battle-feed{margin-left:-7px;margin-right:-7px;font-size:10px;line-height:1.4;}.battle-feed time{display:none;}.subscreen-content{grid-template-columns:1fr;}.subscreen-card.wide{grid-column:auto;}.subscreen-card{padding:13px;}.sub-heading{align-items:flex-start;flex-direction:column;min-height:0;gap:8px;}.page-heading p{font-size:11px;}.back-button{font-size:11px;}.subscreen-card h2{font-size:18px;}.subscreen-card p{font-size:12px;}.build-actions{grid-template-columns:1fr;}.subtle-link{font-size:10px;padding:5px 0;}.local-save-note{font-size:9px;}.right-column{display:flex;flex-direction:column;}.right-column>*{width:100%;}.game-layout{gap:8px;}.lower-grid{display:none;}}
@media(max-width:520px){.app-body{grid-template-columns:1fr;}.character-dock{position:relative;width:100%;padding:9px;}.hero-panel{display:grid;grid-template-columns:144px minmax(0,1fr);column-gap:8px;align-items:start;}.hero-panel>.panel-heading{grid-column:1/-1;}.paperdoll{grid-column:1;grid-row:2/8;width:144px;height:178px;background-size:144px 178px;}.paperdoll-buttons{top:22px;right:4px;gap:3px;width:34px;}.paperdoll-buttons button{font-size:6px;height:11.8px;}#paperdoll-avatar{left:12px;top:23px;width:82px;height:117px;}.paperdoll-name{bottom:14px;left:5px;right:5px;font-size:8px;}.stats-gump{grid-column:2;width:100%;height:113px;}.gump-vitals{left:7px;right:7px;}.vital-row{font-size:10px;}.vital-row>span{width:27px;}.vital-row b{width:46px;}.hero-stats{left:7px;right:7px;}.hero-stats span{font-size:8px;}.hero-stats b{font-size:12px;}.hero-panel>.level-line,.hero-panel>.xp-meter,.hero-panel>.build-actions,.hero-panel>.class-change{grid-column:2;}.level-line{margin-top:2px;}.build-actions{grid-template-columns:1fr 1fr;gap:3px;margin-top:3px;}.subtle-link{font-size:8px;padding:4px 0;}.class-change{height:22px;font-size:10px;margin-top:3px;}.local-save-note{grid-column:1/-1;font-size:9px;margin-top:6px;}.main-column{padding:0 8px 25px;}.world-card canvas{height:340px;}.skill-row{grid-template-columns:repeat(3,minmax(0,1fr));}.skill-meta small{display:none;}.skill-meta strong{font-size:10px;}.skill-key{display:none;}.skill-icon{width:22px;height:22px;flex-basis:22px;}.skill-card{gap:4px;padding:3px;}.top-resources{margin-left:auto;}.material-chip{display:none;}.brand-wordmark small{font-size:6px;}.secondary-nav{max-height:60dvh;}.side-nav .nav-item{font-size:9px;}.side-nav .nav-more{font-size:8px;}.offline-modal{padding:24px 15px;}.offline-totals{grid-template-columns:repeat(2,minmax(0,1fr));}.offline-totals span{font-size:9px;}}

/* The reference client arranges independent gumps on a black desktop. */
html,body{background:#070707;}
.topbar{height:47px;padding:0 14px;border-width:2px;background:linear-gradient(#3e3b35,#24221e);}
.brand-wordmark strong{font-size:17px;}.brand-wordmark small{font-size:8px;}.brand-mark{height:32px;font-size:28px;}.resource-chip{padding:3px 7px;font-size:13px;}.realm-indicator{font-size:10px;}
.app-body{grid-template-columns:minmax(0,1fr) 284px;grid-template-rows:44px 1fr;min-height:calc(100vh - 47px);}
.side-nav,.side-nav.more-open{height:44px;padding:3px 10px;}.side-nav .nav-item{height:34px;min-height:34px;}.secondary-nav{top:42px;}
.character-dock{grid-column:2;grid-row:2;position:sticky;top:0;padding:5px 10px 12px;}
.character-dock .hero-panel>.panel-heading{display:none;}
.main-column{grid-column:1;grid-row:2;padding:5px 4px 22px 9px;}
.paperdoll-name{bottom:14px;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2;}
#edit-hero-name{border:0;background:none;padding:0;color:#e0d2ae;font:14px Georgia,serif;cursor:pointer;}#edit-hero-name:hover{color:#ffe4a7;}#edit-hero-name>span:last-child{font-size:10px;color:#96886b;}
#paperdoll-title{font-size:12px;color:#b8a782;}.paperdoll-name small{font-size:10px;color:#9d9583;}
.paperdoll-buttons .class-change{width:auto;display:block;margin:0;border:0;border-radius:8px;background:none;height:22px;font-size:11px;}
.hero-panel>.local-save-note{display:none;}
.hero-panel>.level-line{margin-top:4px;font-size:10px;}.hero-panel>.xp-meter{height:5px;}
.dock-extras{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px;}
.dock-bag{min-height:120px;background:url('assets/uo/backpack.png') center 18px/100% auto no-repeat;}
.dock-section-title{display:block;width:100%;padding:4px 0;border:0;background:none;color:#c9b78c;font:11px Georgia,serif;cursor:pointer;text-align:center;}.dock-section-title:hover{color:#f4d79e;}
#dock-inventory{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:18px 15px 0;min-height:86px;}#dock-inventory button{display:grid;place-items:center;width:27px;height:27px;padding:1px;background:#0003;border:1px solid #9b794033;cursor:pointer;}#dock-inventory button:hover{border-color:#c6ac6e;background:#b4924322;}#dock-inventory img{max-width:26px;max-height:26px;image-rendering:pixelated;}
.dock-skills-panel{padding:6px 8px 11px;background:url('assets/uo/dark-parchment.png') center/100% 100% no-repeat;min-height:127px;}
.dock-skills-panel .dock-section-title{color:#d6c39a;font-size:11px;margin-bottom:5px;}
#dock-skills{display:flex;flex-direction:column;gap:5px;color:#c5b697;font-size:10px;}#dock-skills .dock-skill{display:grid;grid-template-columns:1fr auto;gap:3px;}#dock-skills .dock-skill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}#dock-skills progress,#dock-skills .progress-inline{width:100%;grid-column:1/-1;height:4px;margin:0;background:#080807;border:1px solid #5e513b;}
.screen-battle>.page-heading{min-height:37px;margin-bottom:5px;}.screen-battle>.page-heading h1{font-size:19px;margin:1px 0;}.screen-battle>.page-heading .eyebrow{font-size:8px;}.world-card canvas{height:clamp(350px,calc(100dvh - 258px),640px);}
@media(min-width:1550px){.app-body{grid-template-columns:minmax(0,1fr) 298px;}.character-dock{width:298px;padding-left:18px;padding-right:18px;}.main-column{padding:8px 6px 24px 12px;}}
@media(max-width:1080px){.app-body{grid-template-columns:minmax(0,1fr) 276px;}.character-dock{width:276px;padding-left:7px;padding-right:7px;}.world-card canvas{height:clamp(350px,calc(100dvh - 260px),560px);}}
@media(max-width:760px){.topbar{height:47px;}.app-body{grid-template-columns:minmax(0,1fr) 224px;grid-template-rows:49px auto;}.side-nav,.side-nav.more-open{height:49px;}.side-nav .nav-item{height:39px;min-height:39px;}.character-dock{width:224px;padding-left:3px;padding-right:3px;}.main-column{padding:6px 3px 24px 7px;}.paperdoll-name{bottom:9px;gap:1px;}#edit-hero-name{font-size:12px;}#paperdoll-title{font-size:10px;}.paperdoll-name small{font-size:8px;}.paperdoll-buttons .class-change{height:18.5px;font-size:9px;}.dock-extras{grid-template-columns:1fr;}.dock-bag{min-height:125px;background-size:145px auto;}.dock-skills-panel{display:none;}#dock-inventory{padding:18px 50px 0;gap:2px;}.world-card canvas{height:370px;}}
@media(max-width:520px){.app-body{display:flex;flex-direction:column;}.side-nav,.side-nav.more-open{width:100%;flex-shrink:0;}.main-column{order:1;width:100%;padding:6px 8px 24px;}.character-dock{order:2;position:relative;width:100%;padding:4px 10px 15px;}.hero-panel{grid-template-columns:144px minmax(0,1fr);}.paperdoll-name{bottom:5px;gap:0;}#edit-hero-name{font-size:9px;}#paperdoll-title{font-size:7px;}.paperdoll-name small{font-size:6px;}.paperdoll-buttons .class-change{height:11.8px;font-size:6px;}.dock-extras{grid-column:2;display:grid;grid-template-columns:1fr 1fr;margin-top:4px;}.dock-bag{min-height:93px;background-size:95px auto;background-position:center 15px;}.dock-skills-panel{display:block;min-height:93px;padding:2px 4px 5px;}.dock-section-title,.dock-skills-panel .dock-section-title{font-size:8px;}#dock-inventory{padding:12px 5px 0;gap:1px;grid-template-columns:repeat(3,1fr);}#dock-inventory button{width:21px;height:21px;}#dock-inventory img{max-width:19px;max-height:19px;}#dock-skills{font-size:8px;gap:3px;}.world-card canvas{height:340px;}}
@media(min-width:761px){.side-nav.more-open>.nav-primary,.side-nav.more-open>.nav-more{display:flex;flex:0 1 155px;min-width:0;min-height:34px;height:34px;width:auto;flex-direction:row;justify-content:center;gap:8px;padding:5px 13px;font-size:13px;text-align:left;}.side-nav.more-open>.nav-more{margin-left:auto;flex-basis:175px;}}

/* Live controls retain the material of the underlying UO gumps. */
#dock-skills .dock-skill{grid-template-columns:1fr auto 13px;align-items:center;min-height:25px;padding:3px 1px;border:0;border-bottom:1px solid #5d544044;background:transparent;color:#dccba8;font:11px Georgia,serif;text-align:left;cursor:pointer;}
#dock-skills .dock-skill:disabled{opacity:.65;cursor:default;}#dock-skills .dock-skill:not(:disabled):hover{color:#fff1c9;background:#a78c3c22;}#dock-skills .text-button{font-size:10px;line-height:1.4;white-space:normal;}
.dock-skills-panel{background-image:url('assets/uo/dark-skills-top.png'),url('assets/uo/dark-skills-bottom.png'),url('assets/uo/dark-skills-mid.png');background-position:top center,bottom center,center;background-size:100% 21px,100% 20px,100% 100%;background-repeat:no-repeat;padding:18px 10px 22px;}
.stats-gump{height:128px;background-size:100% auto;background-position:center;}.stats-gump .hero-stats{background:#0b0b10;bottom:8px;padding-top:5px;border-top:1px solid #55535c;}.stats-gump .hero-stats div{background:transparent;border:0;}.gump-vitals{background:#0b0b10;}
#hero-name-form{position:absolute;z-index:10;top:270px;right:12px;left:12px;padding:12px;background:#15130f;border:2px ridge #97815c;box-shadow:0 5px 15px #000;}#hero-name-form[hidden]{display:none;}#hero-name-form label{display:block;margin-bottom:6px;}#hero-name-input{width:100%;padding:7px;color:#f3dfba;background:#050505;border:1px solid #948568;font:14px Georgia;}#hero-name-form button{padding:6px;margin-top:8px;color:#eddbb3;background:#463c28;border:2px outset #7b6b4b;}
.scene-character-label{left:44%;top:62%;bottom:auto;transform:translateX(-50%);}.scene-enemy-label{left:63%;right:auto;top:65%;bottom:auto;width:160px;transform:translateX(-50%);}.enemy-health-track{left:63%;right:auto;top:76%;bottom:auto;transform:translateX(-50%);width:100px;}

.practice-skill{display:grid;grid-template-columns:110px 1fr 85px;align-items:center;gap:15px;padding:9px 0;border-bottom:1px solid #81725144;font-size:14px;}.practice-skill progress{width:100%;height:9px;accent-color:#a79b66;}.practice-skill b{font-size:12px;text-align:right;}

#activity-choice{background:#171510;border:2px inset #827350;color:#e5d4ae;}

@media(min-width:761px){.paperdoll{width:238px;height:294px;background-size:238px 294px;}#paperdoll-avatar{left:19px;top:37px;width:136px;height:194px;}.paperdoll-buttons{top:35px;right:7px;width:60px;gap:4px;}.paperdoll-buttons button,.paperdoll-buttons .class-change{height:20px;font-size:10px;}.paperdoll-name{bottom:12px;}.stats-gump{height:112px;}.gump-vitals{top:5px;}.hero-stats{bottom:5px;}.dock-extras{margin-top:4px;}.dock-skills-panel{padding-top:14px;padding-bottom:17px;}#dock-skills{gap:1px;}#dock-skills .dock-skill{min-height:19px;padding:1px;}#dock-skills .text-button{padding:4px 0;}.paperdoll-name small{font-size:9px;}#paperdoll-title{font-size:12px;}}

@media(min-width:761px){.vital-row{height:16px;}.stats-gump .hero-stats{bottom:5px;}.dock-extras{grid-template-columns:87px minmax(0,1fr);gap:6px;}#dock-inventory{padding:18px 5px 0;grid-template-columns:repeat(2,1fr);}.dock-skills-panel{padding-left:10px;padding-right:10px;}#dock-skills .dock-skill{font-size:11px;}.paperdoll-name small #hero-class-name{display:none;}}

#paperdoll-slots button{position:absolute;z-index:4;top:calc(74px + var(--slot-i)*20px);left:calc(10px + var(--slot-side)*151px);display:grid;place-items:center;width:17px;height:18px;background:#08080866;border:1px solid #6d7069;color:#ddd;cursor:pointer;padding:0;}#paperdoll-slots img{max-width:17px;max-height:17px;image-rendering:pixelated;}#paperdoll-slots button:hover{outline:1px solid #d7c48b;}

/* Skills, inventory and workshops open as gumps over the running world. */
.screen-sub{position:fixed;z-index:24;left:28px;top:130px;width:min(740px,calc(100vw - 355px));max-height:calc(100dvh - 155px);overflow:auto;padding:15px;border:5px ridge #928773;background:#1b1915;box-shadow:7px 9px 18px #000b;scrollbar-color:#776c55 #151410;}
.screen-sub>.sub-heading{position:sticky;top:-15px;z-index:3;min-height:0;background:#26231f;border-bottom:2px ridge #8f8060;padding:9px 0;margin-bottom:12px;}.screen-sub>.sub-heading p,.screen-sub>.sub-heading .eyebrow{display:none;}.screen-sub>.sub-heading h1{font-size:22px;}.screen-sub .subscreen-content{grid-template-columns:1fr;}.screen-sub .subscreen-card{grid-column:auto;}.back-button{white-space:nowrap;}
@media(max-width:760px){.screen-sub{left:12px;top:110px;width:calc(100vw - 250px);padding:9px;}.screen-sub .class-grid,.screen-sub .talent-grid{grid-template-columns:1fr;}.practice-skill{grid-template-columns:90px 1fr;gap:8px;}.practice-skill b{grid-column:2;}}
@media(max-width:520px){.screen-sub{left:8px;right:8px;width:auto;top:115px;max-height:calc(100dvh - 130px);}}

.inventory-toolbar{display:flex;align-items:center;gap:10px;font-size:12px;padding:5px 0 12px;}.inventory-toolbar select{background:#17130f;color:#dbc9a4;border:2px inset #80745b;padding:6px;}.inventory-toolbar>span{margin-left:auto;color:#b2a58b;}.inventory-gump{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}.backpack-gump{min-height:330px;background:url('assets/uo/backpack.png') center/100% 100% no-repeat;padding:75px 28px 45px;}.bag-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;max-height:235px;overflow:auto;align-content:start;}.bag-object{position:relative;display:grid;place-items:center;min-width:0;min-height:39px;aspect-ratio:1;border:1px solid #b5a17c33;background:#130e0880;padding:4px;cursor:pointer;}.bag-object img{max-width:32px;max-height:34px;image-rendering:pixelated;}.bag-object:hover,.bag-object.selected{outline:1px solid #ead396;border-color:#ead396;background:#a88a3244;}.worn-mark{position:absolute;right:1px;bottom:0;color:#d0c596;font-size:9px;}.bag-object.rarity-epic{border-color:#a88fbb;}.bag-object.rarity-rare{border-color:#84a8c2;}.bag-object.rarity-legendary{border-color:#d5b466;}.item-inspection{padding:18px 15px;background:#242018 url('assets/uo/dark-parchment.png') center/100% 100%;min-height:320px;}.item-inspection h2{font-size:19px;margin:10px 0;}.item-inspection p{line-height:1.6;font-size:13px;}.item-inspection .inline-action{display:block;width:100%;margin-top:8px;text-align:left;}.gear-comparison{display:grid;gap:5px;margin:12px 0;font-size:12px;}.gear-comparison small{display:block;color:#a99e86;margin-bottom:4px;}.gain{color:#bccb9e;}.loss{color:#d19a88;}.item-effect{color:#dac495;}
@media(max-width:1080px){.inventory-gump{grid-template-columns:1fr;}.backpack-gump{min-height:210px;background-size:300px 240px;padding:50px 30px 30px;}.bag-grid{grid-template-columns:repeat(5,1fr);max-height:150px;}.inventory-toolbar{flex-wrap:wrap;}}

.brand{gap:6px;}.brand-mark{font-size:22px;min-width:34px;letter-spacing:-3px;}.brand-wordmark strong{letter-spacing:.06em;}

#paperdoll-slots button{border:0;background:transparent;}#paperdoll-slots button:hover{outline:1px solid #d7c48b;}.dock-bag .dock-section-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.bag-object:focus-visible{outline:2px solid #ffe4a6;outline-offset:1px;}

.zone-pill{font:inherit;cursor:pointer;color:#e0d1ac;}.zone-pill:hover{border-color:#d8c28b;background:#393323;}.region-list{display:grid;gap:8px;}.region-destination{display:grid;gap:8px;text-align:left;padding:17px;border:2px ridge #77684d;background:#28231b url(assets/uo/dark-parchment.png) center/100% 100%;color:#e4d1a6;cursor:pointer;}.region-destination b{font:20px Georgia;}.region-destination small{font-size:12px;line-height:1.5;}.region-destination>span:last-child{font-size:12px;color:#c0b08e;}

#hero-name-form{top:140px;}#hero-name-form label{margin-top:7px;font-size:12px;}#hero-name-form select{width:100%;padding:5px;border:1px solid #88765b;background:#15130f;color:#e0d0ae;font:12px Georgia;}

.icon-blade{background-image:url(assets/uo/client/icons/sword.png);}.icon-cloak{background-image:url(assets/uo/client/icons/cloak.png);}.sigil-guard{background-image:url(assets/uo/client/icons/sword.png);}.sigil-ember{background-image:url(assets/uo/client/icons/book.png);}

.bag-grid{grid-template-columns:repeat(5,36px);justify-content:center;gap:7px;}.bag-object{width:36px;height:38px;min-height:0;}.bag-object img{max-width:30px;max-height:32px;}

.scene-enemy-label[hidden],.enemy-health-track[hidden]{display:none;}

.equip-best-button{border:2px outset #8e7952;background:linear-gradient(#4d432e,#2c2519);color:#f0d9a6;font:13px Georgia,serif;padding:10px 12px;min-height:38px;cursor:pointer;text-align:center;}
.equip-best-button:hover:not(:disabled){background:linear-gradient(#61543a,#3e3423);border-color:#c4ad78;}
.equip-best-button:disabled{opacity:.55;cursor:default;}
.equip-best-button:focus-visible{outline:2px solid #f3d694;outline-offset:2px;}
#dock-equip-best{width:100%;margin:5px 0 0;min-height:29px;padding:5px;font-size:12px;}
.music-controls{position:relative;border-bottom:1px solid #6a5d42;font-size:11px;color:#c3b18d;padding:3px 0;margin-bottom:3px;}
.music-controls summary{cursor:pointer;padding:4px 2px;}
.music-controls[open]{background:#211c15;padding:8px;border:2px ridge #78684a;}
.music-controls label{display:flex;justify-content:space-between;margin:8px 0 4px;}
.music-controls button,.music-controls select{width:100%;background:#302819;border:2px outset #7c6948;color:#e7cfa1;padding:7px;font:12px Georgia;}
.music-controls button{cursor:pointer;}
.music-controls input{width:100%;accent-color:#a68d5b;}
.music-controls small{display:block;margin:8px 0 0;font-size:10px;line-height:1.5;color:#bba681;}
.music-controls button:focus-visible,.music-controls select:focus-visible,.music-controls summary:focus-visible{outline:2px solid #efd49c;}
.equipment-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.equipment-actions small{color:#c0b294;font-size:12px;line-height:1.5;max-width:260px;}
.equipment-feedback{font-size:12px;line-height:1.5;color:#c9d3ad;margin:8px 0;}
.equipment-feedback:empty{display:none;}
.inventory-toolbar{flex-wrap:wrap;}
.inventory-toolbar .upgrade-filter{display:flex;align-items:center;gap:6px;width:100%;font-size:12px;min-height:28px;cursor:pointer;color:#d0c09e;}
.upgrade-filter input{accent-color:#9b885d;width:16px;height:16px;}
.bag-legend{font-size:11px;text-align:center;color:#c4b48e;margin:8px 0 0;}
.upgrade-mark{position:absolute;right:1px;bottom:0;color:#cae3a9;font-size:15px;font-weight:bold;}
.gear-verdict{font-size:12px!important;line-height:1.5;}
.loot-policy{color:#beaf90;font-size:12px;line-height:1.6;margin:14px 0 0;border-top:1px solid #77684b;padding-top:12px;}
.paperdoll.gear-updated{animation:gear-update .6s ease-out;}
@keyframes gear-update{0%{filter:brightness(1.35);}100%{filter:brightness(1);}}
.specialization-modal{max-width:720px;width:100%;max-height:calc(100dvh - 40px);overflow:auto;padding:28px;border:5px ridge #817051;background:#27231d url('assets/uo/dark-parchment.png') center/100% 100%;color:#e5d3ad;box-shadow:0 15px 70px #000;}
.specialization-modal h2{font:28px Georgia;margin:12px 0;}
.specialization-modal p{font-size:14px;line-height:1.6;}
.specialization-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0;}
.specialization-choice{display:grid;grid-template-columns:40px 1fr;gap:6px 10px;text-align:left;padding:14px;border:2px outset #7e6d4d;background:#1d1913;color:#e9d3a8;cursor:pointer;min-height:100px;}
.specialization-choice img{width:32px;height:36px;object-fit:contain;image-rendering:pixelated;grid-row:span 3;}
.specialization-choice strong{font:18px Georgia;}
.specialization-choice small{font:12px/1.5 Georgia;color:#c1b192;}
.specialization-choice:hover,.specialization-choice:focus-visible{background:#3e3524;outline:1px solid #e7c988;}
.skill-cap-note{color:#c0b08d;font-size:12px!important;border-top:1px solid #77684b;padding-top:12px;}
@media(max-width:520px){.specialization-choices{grid-template-columns:1fr;}.specialization-modal{padding:18px;}.equipment-actions .equip-best-button{width:100%;}}
@media(prefers-reduced-motion:reduce){.paperdoll.gear-updated{animation:none;}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skill-budget{display:grid;grid-template-columns:1fr auto;gap:9px;color:#eddaad;font-size:14px;margin:4px 0 14px;}
.skill-budget progress{grid-column:1/-1;width:100%;height:10px;accent-color:#ad9b61;}
.skill-training-note,.skill-mode-help{font-size:12px;line-height:1.65;color:#c8b99a;}
.skill-book{margin:16px 0;display:grid;gap:0;}
.skill-book-row{display:grid;grid-template-columns:minmax(120px,1fr) 90px 100px;gap:12px;align-items:center;padding:11px 3px;border-bottom:1px solid #685d453d;}
.skill-book-row>div{min-width:0;}
.skill-book-row strong{display:block;font-size:13px;font-weight:normal;color:#e5d4b0;}
.skill-book-row progress{width:100%;height:4px;accent-color:#9b9d74;}
.skill-book-row b{font-size:14px;text-align:right;font-weight:normal;font-variant-numeric:tabular-nums;}
.skill-book-row b small{color:#a69879;font-size:11px;}
.skill-mode select{width:100%;background:#1a1712;color:#d5c4a0;border:1px solid #817151;font:12px Georgia;padding:6px;min-height:32px;}
.skill-mode select:focus-visible{outline:2px solid #d5bb7c;}
.skill-current-label{display:inline-block;color:#b9c9a1;font-size:10px;margin-left:8px;}
.skill-book-row.weapon-practice{background:#6e795518;}
.skill-mode-help{border-top:1px solid #786949;padding-top:12px;}
.dock-skill-total{color:#c7b58e;font-size:10px;text-align:right;padding:1px 0 5px;}
.dock-skill.practicing{color:#deebc6;}
.world-book-summary{display:flex;justify-content:space-between;gap:10px;color:#dcc79a;font-size:13px;padding:0 0 12px;}
.world-book-summary span{color:#b9a888;font-size:12px;}
.facet-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 12px;}
.facet-tabs button{font:12px Georgia;color:#c4b493;background:#211d16;border:2px outset #6e6047;padding:7px 9px;cursor:pointer;min-height:32px;}
.facet-tabs button[aria-pressed="true"]{background:#554930;color:#f0dbac;border-color:#c3a770;}
.facet-tabs button:focus-visible{outline:2px solid #eed399;outline-offset:2px;}
.world-search-tools{display:grid;grid-template-columns:1fr 140px;gap:6px 9px;align-items:center;}
.world-search-tools>label:first-child{grid-column:1/-1;font-size:12px;color:#cbbb9b;}
.world-search-tools input,.world-search-tools select{background:#17130f;color:#e4d0a6;border:2px inset #756548;padding:9px;font:13px Georgia;min-width:0;}
.world-search-tools input:focus-visible,.world-search-tools select:focus-visible{outline:2px solid #d8be84;}
.world-travel-help,.world-catalog-source{font-size:12px;line-height:1.6;color:#c0b08f;}
.world-catalog-source a{color:#e5cc95;}
.world-facet-map{margin:0 0 14px;padding:7px;border:3px ridge #776a50;background:#050505;}
.world-facet-map img{display:block;width:100%;height:180px;object-fit:contain;image-rendering:pixelated;}
.world-facet-map figcaption{text-align:center;padding:7px 0 2px;color:#c6b58e;font-size:12px;}
.world-facet-map img[data-native-map]{cursor:crosshair;}
.native-travel-preview{border:2px ridge #88734e;padding:8px;margin:0 0 14px;background:#17130d;display:grid;gap:8px;}
.native-travel-preview img{width:100%;height:180px;object-fit:cover;image-rendering:pixelated;}
.native-travel-preview span{font-size:12px;color:#d4c19b;}
.screen-sub{container-type:inline-size;}
@container(min-width:480px){
  .inventory-gump{grid-template-columns:220px minmax(0,1fr);gap:12px;}
  .backpack-gump{min-height:310px;background-size:220px 290px;background-position:center top;padding:58px 4px 35px;}
  .bag-grid{max-height:200px;grid-template-columns:repeat(4,36px);overflow-x:hidden;}
  .item-inspection{min-height:0;padding:12px 9px;}
  .item-inspection h2{font-size:18px;}
  .item-inspection .inline-action{font-size:12px;}
}
.world-locations{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));}
.world-locations .region-destination{padding:13px;gap:6px;min-width:0;}
.world-locations .region-destination b{font-size:17px;}
.world-locations .region-destination small{font-size:12px;}
.region-destination[hidden]{display:none;}
.region-destination.current-location{border-color:#b7c391;background-color:#354029;}
.region-destination.secret-location{border-color:#776079;}
.region-destination.visited .eyebrow{color:#bfc79e;}
.region-destination:disabled{opacity:.5;cursor:default;}
.location-status{margin:8px 0;font:12px/1.5 Georgia;color:#c2b18e;}
.location-status[hidden],.location-services[hidden]{display:none;}
.objective-panel[hidden]{display:none;}
.location-services{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px;}
.location-services button{color:#e2cfa6;background:#3e3526;border:2px outset #88734d;font:12px Georgia;padding:8px;cursor:pointer;}
.pk-enemy #monster-name,.pk-enemy .enemy-rank{color:#e96358;text-shadow:1px 1px #000;}
@media(max-width:1080px){.world-locations{grid-template-columns:1fr;}}
@media(max-width:520px){.world-search-tools{grid-template-columns:1fr;}.world-book-summary{flex-wrap:wrap;}}
@media(max-width:760px){.skill-book-row{grid-template-columns:minmax(100px,1fr) 75px 90px;gap:6px;}.skill-current-label{display:block;margin:3px 0 0;}}

/* Viewport workspace. Keep the native gumps readable beside the world. */
[hidden] { display: none !important; }
:root { --dock-width: 278px; --chrome-height: 95px; }
button, input, select, summary { -webkit-tap-highlight-color: transparent; }
input:focus-visible, summary:focus-visible { outline: 2px solid #efd49c; outline-offset: 2px; }
button, select, summary { touch-action: manipulation; }
.topbar { position: relative; flex: 0 0 47px; height: 47px; }
.app-shell { height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
.app-body { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) var(--dock-width); grid-template-rows: 48px minmax(0, 1fr); }
.side-nav, .side-nav.more-open { height: 48px; min-height: 48px; padding: 5px 10px; }
.side-nav .nav-item, .side-nav.more-open > .nav-primary, .side-nav.more-open > .nav-more { height: 36px; min-height: 36px; }
.secondary-nav { top: 46px; max-height: calc(100dvh - 111px); overscroll-behavior: contain; scrollbar-color: #776c55 #151410; }
.main-column { align-self: stretch; min-height: 0; padding: 7px 6px 24px 10px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #776c55 #11100e; overscroll-behavior: contain; }
.character-dock { position: relative; top: auto; align-self: stretch; width: var(--dock-width); min-height: 0; padding: 6px 9px 12px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #776c55 #11100e; overscroll-behavior: contain; }
.hero-panel { display: block; position: relative; }
.paperdoll { width: 238px; height: 294px; background-size: 238px 294px; }
#paperdoll-avatar { left: 19px; top: 37px; width: 136px; height: 194px; }
.paperdoll-buttons { top: 35px; right: 7px; width: 60px; gap: 4px; }
.paperdoll-buttons button, .paperdoll-buttons .class-change { height: 20px; min-height: 20px; font-size: 10px; }
.paperdoll-name { bottom: 12px; left: 17px; right: 17px; gap: 2px; }
#edit-hero-name { max-width: 100%; font-size: 14px; line-height: 1.2; }
#paperdoll-name { overflow-wrap: anywhere; }
#paperdoll-title { max-width: 100%; font-size: 12px; }
.paperdoll-name small { font-size: 9px; }
.paperdoll-name small #hero-class-name { display: none; }
.stats-gump { width: 100%; max-width: 262px; height: 112px; }
.vital-row { height: 17px; }
.stats-gump .hero-stats { bottom: 5px; }
.hero-stats > div { min-height: 38px; }
.hero-panel > .level-line { font-size: 11px; }
.dock-extras { grid-template-columns: 88px minmax(0, 1fr); gap: 6px; }
.dock-bag { min-height: 145px; background-size: 100% auto; background-position: center 24px; }
#dock-inventory { padding: 21px 5px 0; grid-template-columns: repeat(2, 1fr); gap: 3px; }
#dock-inventory button { width: 30px; height: 30px; }
.dock-skills-panel { display: block; min-height: 155px; padding: 16px 10px 17px; }
#dock-skills { gap: 1px; }
#dock-skills .dock-skill { min-height: 22px; padding: 2px 0; font-size: 11px; }
#dock-skills .text-button { min-height: 28px; font-size: 11px; }
.dock-section-title { min-height: 28px; font-size: 12px; }
.music-controls { margin: 0 0 5px; }
.music-controls summary { min-height: 29px; display: list-item; padding: 7px 4px; font-size: 12px; }
.music-controls[open] { padding: 0 8px 9px; }
.music-controls[open] summary { margin: 0 -4px; }
.music-controls select { min-width: 0; max-width: 100%; }
.music-controls input[type=range] { min-height: 24px; }
.music-body { display: flex; flex-direction: column; min-width: 0; }
.music-body button { min-height: 36px; }
.music-body label { line-height: 1.4; }
.music-body select { min-height: 36px; }
@media (min-width: 621px) {
  .music-controls[open] { padding: 3px 0; border: 0; border-bottom: 1px solid #6a5d42; background: transparent; }
  .music-controls[open] summary { margin: 0; color: #efd49c; }
  .music-controls[open] .music-body { position: fixed; z-index: 55; right: calc(var(--dock-width) + 12px); bottom: 20px; width: min(280px, calc(100vw - var(--dock-width) - 38px)); max-height: calc(100dvh - 120px); overflow-y: auto; padding: 14px; border: 4px ridge #8a7957; background: #242018 url('assets/uo/dark-parchment.png') center / 100% 100%; box-shadow: 4px 6px 20px #000c; }
  .music-body::before { content: 'Musiques de Britannia'; display: block; margin-bottom: 11px; color: #e7d3a6; font: 17px Georgia, serif; }
}
#dock-equip-best { min-height: 34px; font-size: 12px; }
.world-card canvas { height: clamp(300px, calc(100dvh - 350px), 660px); }
.world-topline, .world-bottomline { gap: 8px; }
.zone-pill { pointer-events: auto; max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 30px; }
.world-bottomline > span { min-width: 0; }
.combat-controls-title { gap: 10px; min-height: 24px; }
.combat-controls-title .text-button { min-height: 30px; flex-shrink: 0; }
.skill-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skill-card { min-width: 0; min-height: 48px; }
.skill-meta { min-width: 0; }
.skill-meta strong { overflow-wrap: anywhere; }
.skill-key { flex-shrink: 0; }
.battle-feed { min-height: 34px; line-height: 1.5; }
.right-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.right-column > *, .lower-grid > *, .subscreen-content > * { min-width: 0; }
.screen-sub { left: 18px; right: auto; top: calc(var(--chrome-height) + 9px); width: min(940px, calc(100vw - var(--dock-width) - 38px)); max-height: calc(100dvh - var(--chrome-height) - 21px); padding: 12px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scroll-padding-top: 72px; }
.screen-sub > .sub-heading { top: -12px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 11px; margin: 0 0 12px; box-shadow: 0 5px 0 #1b1915; }
.screen-sub > .sub-heading h1 { font-size: 22px; line-height: 1.2; }
.back-button { min-height: 36px; padding: 7px 12px; }
.screen-sub .subscreen-content { gap: 12px; }
.subscreen-card { min-width: 0; padding: 16px; }
.subscreen-card p, .subscreen-card small, .subscreen-card strong, .subscreen-card b { overflow-wrap: anywhere; }
.class-grid, .item-grid, .pet-grid, .zone-grid, .talent-grid, .collection-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.choice-card, .item-card, .pet-card, .zone-card, .talent-card, .collection-card { min-width: 0; padding: 12px; }
.choice-card b, .item-card b, .pet-card b, .zone-card b, .talent-card b, .collection-card b { font-size: 14px; }
.choice-card small, .item-card small, .pet-card small, .zone-card small, .talent-card small, .collection-card small { font-size: 12px; line-height: 1.5; color: #c2b594; }
.subscreen-card button.inline-action { min-height: 36px; }
.sub-list li { flex-wrap: wrap; }
.sub-list li > span { min-width: 0; }
.rule-row > span { min-width: 0; }
.rule-row .toggle { flex: 0 0 36px; width: 36px; height: 24px; }
.rule-row .toggle::after { top: 6px; }
.rule-row .toggle.on::after { left: 21px; }
.inventory-toolbar { align-items: center; gap: 8px 12px; padding: 4px 0 10px; }
.inventory-toolbar .upgrade-filter { width: auto; min-height: 36px; }
.equipment-actions small { max-width: 400px; }
.inventory-toolbar label { min-width: 0; }
.inventory-toolbar > span { margin-left: 0; }
.inventory-toolbar select { max-width: 100%; min-height: 36px; }
.inventory-gump { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.bag-grid { overflow-x: hidden; }
.item-inspection { min-width: 0; }
.item-inspection h2 { margin: 7px 0; }
.item-inspection p { line-height: 1.45; }
.item-inspection .inline-action { min-height: 36px; margin-top: 6px; padding: 7px 10px; }
.gear-comparison { margin: 9px 0; gap: 4px; }
.gear-comparison span { overflow-wrap: anywhere; }
.world-search-tools input, .world-search-tools select { width: 100%; min-height: 38px; }
.world-locations { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.region-destination { overflow-wrap: anywhere; }
.facet-tabs button { min-height: 36px; }
.skill-book-row { grid-template-columns: minmax(0, 1fr) 78px 100px; gap: 9px; }
.skill-book-row strong { line-height: 1.4; }
.skill-mode select { min-height: 36px; }
.offline-modal, .specialization-modal { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.modal-backdrop { padding: 16px; }
.modal-close { min-width: 36px; min-height: 36px; border-radius: 0; }
.offline-modal h2 { padding: 0 12px; }
.toast-region { max-width: min(420px, calc(100vw - var(--dock-width) - 40px)); right: auto; left: 16px; bottom: 12px; pointer-events: none; }
.toast { line-height: 1.5; overflow-wrap: anywhere; }
@container (min-width: 500px) {
  .inventory-gump { grid-template-columns: 220px minmax(0, 1fr); }
  .backpack-gump { padding: 58px 4px 35px; min-height: 310px; background-size: 220px 290px; }
  .bag-grid { grid-template-columns: repeat(4, 36px); max-height: 200px; }
}
@container (max-width: 499px) {
  .inventory-gump { grid-template-columns: minmax(0, 1fr); }
  .backpack-gump { min-height: 240px; padding: 55px 18px 30px; background-size: 260px 235px; background-position: center top; }
  .bag-grid { grid-template-columns: repeat(5, 36px); max-height: 140px; }
  .item-inspection { min-height: 0; padding: 14px; }
  .skill-book-row { grid-template-columns: minmax(0, 1fr) 65px 90px; gap: 6px; }
  .skill-current-label { display: block; margin: 2px 0 0; }
  .world-search-tools { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1550px) {
  :root { --dock-width: 300px; }
  .character-dock { padding-right: 19px; padding-left: 19px; }
}
@media (max-height: 780px) and (min-width: 621px) {
  .paperdoll { width: 206px; height: 254px; background-size: 206px 254px; }
  #paperdoll-avatar { left: 17px; top: 32px; width: 118px; height: 168px; }
  .paperdoll-buttons { top: 30px; right: 6px; width: 52px; gap: 3px; }
  .paperdoll-buttons button, .paperdoll-buttons .class-change { height: 17px; min-height: 17px; font-size: 9px; }
  .paperdoll-name { bottom: 11px; gap: 1px; }
  #edit-hero-name { font-size: 13px; }
  #paperdoll-title { font-size: 11px; }
  .stats-gump { height: 96px; }
  .vital-row { height: 16px; }
  .hero-stats > div { min-height: 33px; }
  .hero-stats span { font-size: 9px; }
  .hero-panel > .level-line { margin-top: 2px; margin-bottom: 2px; }
  #dock-equip-best { min-height: 30px; padding: 3px; margin-top: 4px; }
  .music-controls { padding: 0; margin-bottom: 2px; }
  .music-controls[open] { padding: 0; }
  .music-controls summary { min-height: 24px; padding: 4px; }
  .dock-skills-panel { min-height: 0; padding-top: 9px; padding-bottom: 10px; }
  #dock-skills { gap: 0; }
  #dock-skills .dock-skill { min-height: 16px; padding: 0; line-height: 16px; }
  #dock-skills .text-button { min-height: 20px; padding: 1px 0; font-size: 10px; }
  .dock-section-title, .dock-skills-panel .dock-section-title { min-height: 19px; margin-bottom: 1px; padding: 2px 0; font-size: 11px; }
  .dock-skill-total { font-size: 10px; padding-bottom: 2px; }
  .dock-extras { margin-top: 2px; }
}
@media (min-width: 621px) and (max-width: 1000px) {
  :root { --dock-width: 264px; }
  .character-dock { padding-left: 4px; padding-right: 4px; }
  .right-column, .lower-grid { grid-template-columns: minmax(0, 1fr); }
  .skill-meta small { display: none; }
  .skill-card { gap: 5px; padding: 5px; }
  .skill-key { display: none; }
}
@media (min-width: 621px) and (max-width: 760px) {
  :root { --dock-width: 246px; }
  .side-nav .nav-item, .side-nav.more-open > .nav-primary, .side-nav.more-open > .nav-more { flex-direction: row; padding: 4px; font-size: 11px; gap: 3px; }
  .side-nav .nav-icon { display: none; }
  .side-nav .nav-more { flex: 1.4; }
  .paperdoll { width: 238px; height: 294px; background-size: 238px 294px; }
  #paperdoll-avatar { left: 19px; top: 37px; width: 136px; height: 194px; }
  .paperdoll-buttons { top: 35px; right: 7px; width: 60px; gap: 4px; }
  .paperdoll-buttons button, .paperdoll-buttons .class-change { height: 20px; min-height: 20px; font-size: 10px; }
  .dock-extras { grid-template-columns: 80px minmax(0, 1fr); }
  .skill-icon { display: none; }
  .world-topline { left: 6px; right: 6px; }
  .zone-pill { max-width: 100%; font-size: 10px; }
  .world-bottomline { font-size: 9px; letter-spacing: 0; }
  .scene-enemy-label { max-width: 115px; }
}
@media (max-width: 620px) {
  :root { --dock-width: 0px; --chrome-height: 103px; }
  .app-shell { height: auto; min-height: 100dvh; }
  .topbar { padding: 0 7px; }
  .brand { gap: 3px; min-width: 0; }
  .brand-mark { width: 26px; min-width: 26px; font-size: 24px; }
  .brand-wordmark strong { font-size: 12px; letter-spacing: .02em; }
  .brand-wordmark small { font-size: 7px; }
  .top-resources { gap: 3px; }
  .resource-chip { font-size: 11px; min-width: 0; padding: 3px; gap: 2px; }
  .resource-chip small, .material-chip { display: none; }
  .resource-glyph { width: 15px; height: 18px; }
  .app-body { display: flex; flex-direction: column; }
  .side-nav, .side-nav.more-open { position: sticky; top: 0; order: 0; flex: 0 0 56px; width: 100%; min-height: 56px; height: 56px; padding: 4px; gap: 3px; }
  .side-nav .nav-item, .side-nav.more-open > .nav-primary, .side-nav.more-open > .nav-more { flex: 1; flex-direction: column; justify-content: center; gap: 0; padding: 3px 1px; height: 46px; min-height: 46px; font-size: 10px; }
  .side-nav .nav-more { flex: 1.25; font-size: 9px; }
  .side-nav .nav-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
  .nav-badge { top: 1px; right: 1px; }
  .secondary-nav { top: 54px; right: 4px; width: min(360px, calc(100vw - 8px)); max-height: calc(100dvh - 125px); }
  .character-dock { order: 1; width: 100%; padding: 9px 8px 3px; overflow: visible; align-self: auto; }
  .hero-panel { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 5px 8px; max-width: 480px; margin: 0 auto; }
  .paperdoll { grid-column: 1; grid-row: 1 / span 5; width: 218px; height: 270px; background-size: 218px 270px; }
  #paperdoll-avatar { left: 18px; top: 35px; width: 125px; height: 178px; }
  .paperdoll-buttons { top: 33px; right: 6px; width: 55px; gap: 3px; }
  .paperdoll-buttons button, .paperdoll-buttons .class-change { height: 19px; min-height: 19px; font-size: 9px; }
  .paperdoll-name { bottom: 11px; left: 14px; right: 14px; gap: 1px; }
  #edit-hero-name { font-size: 12px; }
  #paperdoll-title { font-size: 10px; }
  .paperdoll-name small { font-size: 8px; }
  .stats-gump { grid-column: 2; grid-row: 1; height: 135px; width: 100%; background-size: 100% 100%; margin-top: 10px; }
  .gump-vitals { left: 6px; right: 6px; top: 6px; }
  .vital-row { position: relative; height: 27px; gap: 4px; flex-wrap: wrap; font-size: 10px; }
  .vital-row > span { width: 27px; }
  .vital-row .meter { order: 3; flex-basis: 100%; height: 5px; margin-top: -6px; }
  .vital-row b { width: auto; margin-left: auto; font-size: 9px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); left: 6px; right: 6px; }
  .hero-stats > div { min-height: 22px; gap: 0; padding: 0; }
  .hero-stats span { font-size: 8px; }
  .hero-stats b { font-size: 11px; }
  .hero-panel > .level-line { grid-column: 2; margin: 0; font-size: 10px; }
  .hero-panel > .xp-meter { grid-column: 2; margin: 0; }
  #dock-equip-best { grid-column: 2; font-size: 11px; min-height: 38px; margin: 0; }
  .music-controls { grid-column: 2; margin: 0; font-size: 10px; }
  .music-controls summary { font-size: 11px; }
  .music-controls[open] { grid-column: 1 / -1; grid-row: 6; }
  .music-body { position: static; width: auto; max-height: none; padding: 0 0 2px; }
  .dock-extras { grid-column: 1 / -1; grid-row: 7; display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1fr); gap: 10px; margin: 0; }
  .dock-bag { min-height: 145px; background-size: 130px 125px; background-position: center 24px; }
  #dock-inventory { grid-template-columns: repeat(3, 30px); padding: 18px 0 0; justify-content: center; gap: 3px; }
  #dock-inventory button { width: 30px; height: 30px; }
  #dock-inventory img { max-width: 26px; max-height: 26px; }
  .dock-skills-panel { min-height: 150px; padding: 16px 12px; }
  #dock-skills .dock-skill { min-height: 21px; font-size: 11px; }
  .dock-section-title { font-size: 12px; }
  .main-column { order: 2; width: 100%; padding: 6px 8px 24px; overflow: visible; }
  .world-card canvas { height: 360px; }
  .world-topline, .world-bottomline { font-size: 9px; letter-spacing: 0; }
  .region-readout { display: none; }
  .scene-enemy-label { max-width: 120px; }
  .character-name, .scene-enemy-label strong { font-size: 12px; }
  .character-level, .enemy-rank, .enemy-level { font-size: 8px; }
  .skill-card { min-height: 44px; gap: 5px; padding: 5px; }
  .skill-icon { width: 22px; height: 22px; flex: 0 0 22px; }
  .skill-meta strong { font-size: 11px; }
  .skill-meta small, .skill-key { display: none; }
  .right-column { grid-template-columns: minmax(0, 1fr); }
  .lower-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .screen-sub { left: 6px; right: 6px; top: 109px; width: auto; max-height: calc(100dvh - 120px); padding: 10px; }
  .screen-sub > .sub-heading { top: -10px; }
  .screen-sub > .sub-heading h1 { font-size: 20px; }
  .toast-region { left: 10px; right: auto; bottom: 10px; max-width: calc(100vw - 20px); }
  .screen-sub .class-grid, .screen-sub .talent-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  #hero-name-form { position: fixed; top: 120px; left: 15px; right: 15px; max-height: calc(100dvh - 140px); overflow: auto; }
}
@media (max-width: 359px) {
  .hero-panel { grid-template-columns: 195px minmax(0, 1fr); gap: 4px; }
  .paperdoll { width: 195px; height: 241px; background-size: 195px 241px; }
  #paperdoll-avatar { left: 16px; top: 31px; width: 112px; height: 159px; }
  .paperdoll-buttons { top: 29px; right: 5px; width: 50px; gap: 2px; }
  .paperdoll-buttons button, .paperdoll-buttons .class-change { height: 17px; min-height: 17px; font-size: 8px; }
  .paperdoll-name { bottom: 9px; }
  #edit-hero-name { font-size: 11px; }
  #paperdoll-title { font-size: 9px; }
  .resource-glyph { display: none; }
  .skill-icon { display: none; }
  .skill-book-row { grid-template-columns: minmax(0, 1fr) 58px; }
  .skill-mode { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* UO container: items have persistent free positions and may overlap. */
.inventory-gump .backpack-gump {
  position: relative; width: 250px; max-width: 100%; height: 340px;
  min-height: 340px; padding: 0; margin-inline: auto;
  background-size: 100% 100%; background-position: center;
}
.backpack-gump .bag-grid.free-bag {
  display: block; position: absolute; left: 14%; top: 24%; width: 72%; height: 60%;
  max-height: none; padding: 0; margin: 0; overflow: visible;
}
.free-bag .bag-object {
  position: absolute; width: 36px; height: 38px; min-height: 0; padding: 1px;
  transform: translate(-50%, -50%); background: transparent;
  border: 1px solid transparent; outline: none; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.free-bag .bag-object img { max-width: 32px; max-height: 34px; pointer-events: none; -webkit-user-drag: none; }
.free-bag .bag-object:hover { background: #c7ac6b12; border-color: #b4a17c88; }
.free-bag .bag-object.selected, .free-bag .bag-object:focus-visible { outline: 1px dotted #ead396; background: #c7ac6b18; }
.free-bag .bag-object.bag-dragging { cursor: grabbing; filter: drop-shadow(2px 3px 2px #000b); outline: 1px dotted #e4cb8a; }
.free-bag > p { margin: 35px 0; text-align: center; font-size: 12px; color: #b5a17c; }
.backpack-gump .bag-legend { position: absolute; left: 8px; right: 8px; bottom: 12px; margin: 0; font-size: 10px; line-height: 1.5; text-align: center; }

.landmark-shortcuts { display:flex; flex-wrap:wrap; gap:6px; padding:8px 0 14px; }
.landmark-shortcuts button { font:12px Georgia; color:#d8c39a; background:#2c261b; border:2px outset #79694b; padding:7px 10px; cursor:pointer; }
.landmark-shortcuts button[aria-pressed="true"] { border-style:inset; background:#50432b; color:#f7dfa8; }
.scene-enemy-label.is-pk strong { color:#ff4747; text-shadow:1px 1px #000,-1px -1px #000; }