/* Todroth's UX standard (October 2026, the user's: "the quest log should be
   the standard for the UX"), the shared parts every window is built from.
   docs/07-art-style/ux-standard.md says what each is for; uxwin.js builds a
   list-and-page window out of them. The values are the quest log's own
   (style.css #quest-log, .ql-*, .qp-*), so a window built here looks like it.

   Prefix: .ux- (and .btn.danger). Nothing in here restyles an older class:
   other windows keep their looks until they are moved over. */

/* -- the frame: a stone panel, centred, above the other windows -- */
/* (#hud first: over any older window's own #id rules, #mod-win's) */
#hud .ux-win, .ux-win { z-index: 21; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 860px; height: 600px; max-width: calc((100vw - 24px) / var(--ui)); max-height: calc((100vh - 24px) / var(--ui)); display: flex; flex-direction: column; padding: 0; }
#hud .ux-win.ux-narrow, .ux-win.ux-narrow { width: 560px; }
/* (a window to read in, the guide: a little bigger) */
#hud .ux-win.ux-big, .ux-win.ux-big { width: 980px; height: 680px; }
#hud .ux-win.ux-short, .ux-win.ux-short { height: auto; }

/* -- the title bar: an emblem on the left, the name in the middle, the close on the right -- */
.ux-head { position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: 42px; margin: 0 0 6px; background: linear-gradient(rgba(70, 40, 10, 0.55), rgba(30, 18, 6, 0.55)); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 -2px 0 rgba(255, 220, 140, 0.15); }
.ux-title { font-family: var(--display); font-size: 24px; letter-spacing: 0.06em; color: #ffd84a; text-shadow: 2px 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 110px); }
.ux-head .x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: #e8d8a8; font: 22px var(--sans); text-shadow: 1px 1px 0 #000; cursor: pointer; padding: 0 4px; }
.ux-head .x:hover { color: var(--gold); }
.ux-emblem { position: absolute; left: 10px; top: 4px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6a5a3a, #2a1e10); box-shadow: 0 0 0 2px #000, 0 0 0 4px #b08a44, 0 0 0 5px #000; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ux-emblem img { width: 30px; height: 30px; image-rendering: pixelated; }
.ux-emblem canvas { width: 26px; height: 26px; image-rendering: pixelated; }
.ux-emblem b { font: 22px var(--display); color: #ffd84a; text-shadow: 1px 1px 0 #000; }

/* -- the bar under the title: fold-all, a count, the tabs, then small tools on the right -- */
.ux-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 6px 6px; font: 18px var(--sans); color: #e8d8b0; min-width: 0; }
.ux-bar .ux-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ux-foldall { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: #ffd84a; background: none; border: 0; cursor: pointer; text-shadow: 1px 1px 0 #000; padding: 0 4px; white-space: nowrap; }
.ux-pm { display: inline-block; flex: none; width: 13px; height: 13px; line-height: 12px; font-style: normal; text-align: center; font-size: 14px; color: #fff; background: #7a1a10; box-shadow: 0 0 0 1px #000, inset 1px 1px 0 #c84a3a; }
.ux-count { padding: 1px 10px; white-space: nowrap; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 2px #000, 0 0 0 3px #6e6a60; }
.ux-count b { color: #ffd84a; font-weight: 400; }
.ux-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ux-tabs button { font: 17px var(--sans); color: #c8b890; padding: 1px 10px; background: rgba(0, 0, 0, 0.45); border: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px #4e4a40; cursor: pointer; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.ux-tabs button:hover { color: #ffe7a0; }
.ux-tabs button.on { color: #ffe7a0; background: rgba(110, 80, 30, 0.6); box-shadow: 0 0 0 2px #000, 0 0 0 3px #b08a44; }
.ux-bar .btn.small, .ux-foot .btn.small { font-size: 16px; padding: 1px 10px; }
.ux-win .btn.on { color: #fff6c0; box-shadow: inset 0 0 0 2px var(--gold); background: linear-gradient(#7a4a12, #3e2206); }

/* -- the search box: a dark well, as the chat box -- */
.ux-search { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 6px 6px; font: 16px var(--sans); color: #e8d8b0; }
.ux-search input { flex: 1 1 auto; min-width: 0; font: 18px var(--sans); color: #f4eedc; background: rgba(14, 13, 11, 0.85); border: 0; padding: 3px 8px; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60; outline: none; user-select: text; -webkit-user-select: text; }
.ux-search input:focus { box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #b08a44; }
.ux-search input::placeholder { color: #8a7e66; }
.ux-search .ux-found { white-space: nowrap; color: #c8b890; }
.ux-search .ux-found b { color: #ffd84a; font-weight: 400; }

/* a row of buttons under the search box (the moderator panel's tools: one click opens each) */
.ux-subbar { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 8px; }
.ux-subbar:empty { display: none; }
.ux-subbar .btn.small { font-size: 16px; padding: 1px 10px; }
/* (a power that is on: the moderator panel's row, lit as the old panel's were) */
.ux-subbar .btn.on { color: #6aff8a; border-color: #6aff8a; background: rgba(40, 120, 60, 0.35); }

/* -- the main part: the list in a dark well on the left, the page on parchment on the right -- */
.ux-main { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; padding: 0 4px; }
.ux-list { flex: 0 0 34%; overflow-y: auto; padding: 4px 2px; background: rgba(8, 7, 6, 0.72); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px #000; font: 18px var(--sans); outline: none; }
.ux-list.wide { flex-basis: 43%; }
.ux-list:focus-visible { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px #000, 0 0 0 3px #b08a44; }
.ux-group { display: flex; align-items: center; gap: 7px; padding: 3px 6px 1px; color: #e8dcc0; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; }
.ux-group:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.ux-gn { margin-left: auto; color: #8a7e66; font-size: 15px; }
.ux-row { display: flex; align-items: center; gap: 6px; padding: 1px 6px 1px 18px; cursor: pointer; white-space: nowrap; user-select: none; color: #e8d8b0; }
.ux-row:hover { background: rgba(255, 216, 74, 0.08); }
.ux-row.sel { background: linear-gradient(90deg, rgba(255, 200, 40, 0.45), rgba(255, 200, 40, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 230, 140, 0.5), inset 0 -1px 0 rgba(120, 80, 0, 0.6); }
.ux-row.sel .ux-name { color: #fff6d0 !important; }
.ux-row.dim .ux-name { opacity: 0.6; }
.ux-row img.ux-ic { flex: none; width: 20px; height: 20px; image-rendering: pixelated; margin-left: -4px; }
.ux-name { overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000; }
.ux-tag { flex: 0 0 auto; margin-left: auto; padding-left: 6px; color: #c8b890; font-size: 16px; }
.ux-tag.ok { color: #7aff5a; }
.ux-tag.warn { color: #ff9a3a; }
.ux-tag.bad { color: #ff7a5a; }
.ux-tag.mod { color: #8fd0ff; }
.ux-none { margin: 10px; color: #a89a7a; white-space: normal; }
.ux-gempty { padding: 1px 6px 3px 24px; color: #8a7e66; font-size: 16px; }

/* -- the page: parchment, ink, a title, headings with a rule under them -- */
.ux-page { flex: 1 1 auto; min-width: 0; overflow-y: auto; position: relative; color: #3a2610; text-shadow: none; background: radial-gradient(ellipse at 50% 40%, rgba(255, 248, 220, 0.5), rgba(255, 248, 220, 0) 70%), repeating-linear-gradient(0deg, rgba(120, 80, 30, 0.05) 0 2px, rgba(0, 0, 0, 0) 2px 5px), linear-gradient(160deg, #ecdcb0, #d8c08a 55%, #c4a468); box-shadow: inset 0 0 0 2px #5a3a14, inset 0 0 26px rgba(90, 50, 10, 0.55), 0 0 0 2px #000; user-select: text; -webkit-user-select: text; }
.ux-pg { padding: 12px 18px 16px; font: 19px var(--sans); line-height: 1.15; }
.ux-pg h2 { margin: 0 0 6px; font-family: var(--display); font-size: 22px; color: #4a1e08; letter-spacing: 0.02em; }
.ux-pg h3 { margin: 12px 0 4px; font-family: var(--display); font-size: 17px; color: #5a2a0a; border-bottom: 1px solid rgba(90, 42, 10, 0.35); }
.ux-pg p { margin: 0 0 7px; }
.ux-pg ul, .ux-pg ol { margin: 0 0 7px; padding-left: 20px; }
.ux-pg li { margin: 1px 0 3px; }
.ux-pg b { color: #4a1e08; font-weight: 400; }
.ux-pg a { color: #2a3a8a; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; }
.ux-pg a:hover { color: #1a2a6a; }
.ux-lead { font-size: 20px; color: #4a2a0a; }
.ux-small { font-size: 17px; color: #5a4020; }
.ux-ok { color: #2a6a10; }
.ux-warn { color: #8a2a10; }
.ux-empty { padding: 20px; color: #6a5030; font: 19px var(--sans); }
.ux-stamp { position: absolute; right: 16px; top: 14px; padding: 2px 10px; font-family: var(--display); font-size: 18px; color: rgba(40, 110, 20, 0.85); border: 3px solid rgba(40, 110, 20, 0.75); transform: rotate(8deg); letter-spacing: 0.08em; pointer-events: none; }
.ux-stamp.mod { color: rgba(30, 70, 130, 0.85); border-color: rgba(30, 70, 130, 0.75); }
.ux-pic { float: right; margin: 0 0 6px 12px; width: 64px; height: 64px; background: #1a140c; box-shadow: 0 0 0 2px #000, 0 0 0 3px #b08a44; }
.ux-pic img { width: 64px; height: 64px; image-rendering: pixelated; }

/* keys: the player's own bindings, as little stone keycaps */
kbd.ux-key, .ux-pg kbd { display: inline-block; min-width: 22px; padding: 0 6px; margin: 0 1px; font: 17px var(--sans); line-height: 20px; text-align: center; color: #fff2c0; background: linear-gradient(#5e5240, #3a3024); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 240, 200, 0.35), 0 2px 0 #1a140c; text-shadow: 1px 1px 0 #000; white-space: nowrap; vertical-align: 1px; }
.ux-key.none { color: #c8a080; font-style: italic; }
.ux-keys { width: 100%; border-collapse: collapse; margin: 2px 0 8px; }
.ux-keys td { padding: 3px 6px; vertical-align: top; border-bottom: 1px solid rgba(90, 42, 10, 0.18); }
.ux-keys td:first-child { width: 1%; white-space: nowrap; text-align: right; }
.ux-keys tr:last-child td { border-bottom: 0; }

/* facts: a name and its number, in two columns */
.ux-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 2px 0 8px; }
.ux-facts dt { color: #6a4a20; }
.ux-facts dd { margin: 0; color: #3a2610; }
.ux-table { width: 100%; border-collapse: collapse; margin: 2px 0 8px; font-size: 17px; }
.ux-table th { text-align: left; font-weight: 400; color: #6a4a20; border-bottom: 1px solid rgba(90, 42, 10, 0.35); padding: 2px 6px; }
.ux-table td { padding: 2px 6px; border-bottom: 1px solid rgba(90, 42, 10, 0.15); }
.ux-table td.n, .ux-table th.n { text-align: right; white-space: nowrap; }

/* a box set into the page: a tip, someone who teaches it, a moderator's part */
.ux-box { margin: 8px 0 10px; padding: 6px 10px 4px; background: rgba(60, 36, 10, 0.12); box-shadow: inset 0 0 0 1px rgba(90, 50, 10, 0.45); }
.ux-box.mod { background: rgba(30, 60, 110, 0.1); box-shadow: inset 0 0 0 1px rgba(30, 60, 110, 0.45); }
.ux-box-head { font-family: var(--display); font-size: 16px; color: #5a2a0a; margin-bottom: 4px; }
.ux-box.mod .ux-box-head { color: #1e3a6a; }
.ux-box-head span { font-family: var(--sans); font-size: 15px; color: #7a5a30; margin-left: 8px; }
.ux-box p:last-child { margin-bottom: 4px; }
.ux-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
/* buttons on parchment: paper tabs, not stone (as the moderators' quest tools) */
.ux-pb { font: 16px var(--sans); line-height: 1.1; color: #3a2610; background: linear-gradient(#f2e2b8, #d8c08a); border: 1px solid #8a6a2a; border-radius: 2px; padding: 2px 9px; cursor: pointer; box-shadow: 0 1px 0 rgba(60, 30, 0, 0.35); }
.ux-pb:hover { background: linear-gradient(#fff0c8, #e6cc92); color: #1a0e00; }
.ux-pb:disabled { opacity: 0.5; cursor: default; }
.ux-pb.danger { color: #7a1a08; border-color: #a0482a; }
/* a paper tab that is on (a power, a setting): green ink, pressed in */
.ux-pb.on { color: #1e4a08; background: linear-gradient(#d8e8a8, #b8cc7a); border-color: #4a7a2a; box-shadow: inset 0 1px 2px rgba(30, 60, 0, 0.4); }
/* a number box on parchment */
.ux-pg input[type=number], .ux-pg input[type=text] { font: 17px var(--sans); color: #2a1a08; background: #f6ecd0; border: 1px solid #8a6a2a; padding: 1px 4px; width: 64px; user-select: text; -webkit-user-select: text; }
.ux-pg input:focus { outline: 2px solid #b08a44; outline-offset: 0; }
.ux-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin: 2px 0 8px; }
.ux-grid label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ux-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ux-two > .ux-box { margin-top: 2px; }
.ux-lesson-lines { margin: 4px 0 6px; padding-left: 12px; border-left: 3px solid rgba(90, 42, 10, 0.3); font-style: italic; color: #4a2a10; }

/* money and numbers: gold with its coin, experience in blue ink */
.ux-gold { color: #6a4a08; white-space: nowrap; }
.ux-coin { display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff0a0, #e6b42a 50%, #8a6a08); box-shadow: 0 0 0 1px #5a3c08; }
.ux-xp { color: #3a2a6a; }
.ux-dark .ux-gold { color: #ffd84a; }

/* -- the foot: what to do with the one chosen on the left, Close on the right -- */
.ux-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 4px 2px; min-width: 0; }
.ux-foot .btn { min-width: 108px; flex: none; white-space: nowrap; }
.ux-foot .ux-close { margin-left: auto; }
.ux-info { margin-left: 8px; font: 16px var(--sans); color: #a89a7a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-info .good { color: #ffd84a; }
.ux-info .bad { color: #ff9a7a; }
.ux-win .btn:disabled { filter: grayscale(1) brightness(0.6); cursor: default; }
.ux-win .btn:disabled:hover { filter: grayscale(1) brightness(0.6); }

/* the way back to the window that opened this one (the moderator panel) */
.ux-foot .btn.ux-back { min-width: 0; color: #ffe7a0; }
/* the danger button: stone, with red letters and a red edge; always asked first */
.btn.danger { color: #ffb0a0; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(170, 40, 20, 0.7); }
.btn.danger:hover { color: #ffd0c0; }

/* -- the question over the window: Abandon? Delete? -- */
.ux-ask { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.ux-ask.hidden { display: none; }
.ux-ask-in { width: 400px; max-width: calc(100% - 24px); padding: 14px 18px; font: 19px var(--sans); color: #efe4c8; background: var(--ui-stone) 0 0 / 128px; border: 12px solid transparent; border-image: var(--ui-frame-stone) 6 / 12px / 0 repeat; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4); text-align: center; }
.ux-ask-in b { color: #ffd84a; font-weight: 400; }
.ux-ask-in .ux-small { color: #c8b890; }
.ux-ask-btns { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }

/* -- small screens: the list above the page -- */
@media (max-width: 720px), (max-height: 460px) {
  .ux-main { flex-direction: column; }
  .ux-list, .ux-list.wide { flex: 0 0 38%; }
  .ux-foot .btn { min-width: 0; }
  .ux-bar { gap: 8px; flex-wrap: wrap; }
  .ux-title { font-size: 20px; }
  .ux-info { display: none; }
  .ux-two { grid-template-columns: 1fr; }
}

/* little item chips on a page (the guide's scrolls): an icon and a name, with the item's tooltip */
.ux-scrolls { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 2px 0 8px; }
.ux-scroll { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 1px; font-size: 16px; background: rgba(60, 36, 10, 0.14); box-shadow: inset 0 0 0 1px rgba(90, 50, 10, 0.4); cursor: default; }
.ux-scroll img { width: 22px; height: 22px; image-rendering: pixelated; background: #1a140c; }

/* items as pictures, the quest log's reward icons without their names (a loadout's gear) */
.ux-icons { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.ux-icon { position: relative; flex: none; width: 40px; height: 40px; background: #1a140c; box-shadow: 0 0 0 2px #000, 0 0 0 3px #b08a44; cursor: default; }
.ux-icon img { width: 40px; height: 40px; image-rendering: pixelated; }
.ux-icon b { position: absolute; right: 2px; bottom: 0; color: #fff; font-weight: 400; text-shadow: 1px 1px 0 #000; }

/* an older window's part set into a page as it is, on stone (the farms in the house window) */
.ux-well { margin: 4px 0 8px; padding: 6px 10px; color: #e8d8b0; text-shadow: 1px 1px 0 #000; font: 18px var(--sans); background: rgba(8, 7, 6, 0.82); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px #5a3a14; }
.ux-well .win-label { color: #ffd84a; }

/* what a thing takes: the quest log's reward rows, the count red when short (crafting) */
.ux-needs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 8px; }
.ux-need { display: flex; align-items: center; gap: 8px; padding: 2px; background: rgba(60, 36, 10, 0.18); box-shadow: inset 0 0 0 1px rgba(90, 50, 10, 0.45); cursor: default; }
.ux-need .ux-icon { margin: 1px; }
.ux-need-name { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 1; overflow: hidden; text-overflow: ellipsis; }
.ux-need-n { flex: none; padding-right: 6px; font-size: 17px; color: #2a6a10; }
.ux-need.short .ux-need-n { color: #a02a10; }
.ux-need.short { box-shadow: inset 0 0 0 1px rgba(160, 42, 16, 0.6); }
.ux-coinbox { display: flex; align-items: center; justify-content: center; }
.ux-coinbox .ux-coin { width: 18px; height: 18px; margin: 0; }
.ux-prog { height: 12px; margin: 4px 0 8px; background: rgba(40, 24, 8, 0.4); box-shadow: inset 0 0 0 1px rgba(90, 50, 10, 0.6); }
.ux-prog i { display: block; height: 100%; width: 0; background: linear-gradient(#e8c060, #a07818); }
.ux-at img { width: 28px; height: 28px; vertical-align: middle; image-rendering: pixelated; }
/* a window opened with the bag beside it (crafting, the shop): on the left, as
   the old shop was, never under the bag on the right (its 320 and its margin) */
#hud .ux-win.ux-withbag, .ux-win.ux-withbag { left: 12px; transform: translate(0, -50%); width: 780px; max-width: calc((100vw - 24px) / var(--ui) - 344px); }
@media (max-width: 760px) { #hud .ux-win.ux-withbag, .ux-win.ux-withbag { max-width: calc((100vw - 24px) / var(--ui)); } }

/* the game's own bars set into a page (a pet's health, happiness, food) */
.ux-bars { margin: 4px 0 8px; display: grid; gap: 4px; }
.ux-bars .bar { position: relative; margin: 0; }

/* -- the standard's frame on an older window (uxwin.js uxFrame): its title bar,
      its tabs, its hint as the foot's quiet help. The window's own insides stay
      as they are. -- */
.ux-framed { padding-top: 0; }
.ux-framed > .qd-head { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 4px 44px; margin: 0 0 6px; background: linear-gradient(rgba(70, 40, 10, 0.55), rgba(30, 18, 6, 0.55)); border-bottom: 0; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 -2px 0 rgba(255, 220, 140, 0.15); }
.ux-framed > .qd-head .qd-name { font: 24px var(--display); font-weight: 400; font-size-adjust: none; letter-spacing: 0.06em; color: #ffd84a; text-shadow: 2px 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-framed > .qd-head .qd-title { font: 16px var(--sans); color: #c8b890; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ux-framed > .qd-head .x { position: absolute; top: 6px; right: 8px; font: 22px var(--sans); color: #e8d8a8; text-shadow: 1px 1px 0 #000; }
.ux-framed > .qd-head .x:hover { color: var(--gold); }
.ux-framed > .qd-head .ux-emblem { top: 4px; }
.ux-framed .win-hint { font: 16px var(--sans); color: #a89a7a; padding: 6px 12px 6px; }
.ux-framed .set-tabs button, .ux-framed .sk-tab, .ux-framed .bag-tabs button { font: 17px var(--sans); color: #c8b890; background: rgba(0, 0, 0, 0.45); border: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px #4e4a40; text-shadow: 1px 1px 0 #000; }
.ux-framed .set-tabs button.on, .ux-framed .sk-tab.on, .ux-framed .bag-tabs button.on { color: #ffe7a0; background: rgba(110, 80, 30, 0.6); box-shadow: 0 0 0 2px #000, 0 0 0 3px #b08a44; }
.ux-framed .set-tabs, .ux-framed .sk-tabs { gap: 8px; padding: 2px 12px 6px; }
@media (max-width: 720px) { .ux-framed > .qd-head .qd-title { display: none; } .ux-framed > .qd-head .qd-name { font-size: 20px; } }

/* a colour that means something (a rarity), on a dark chip so it reads on parchment */
.ux-chip { display: inline-block; padding: 0 6px; background: #2a1e10; box-shadow: 0 0 0 1px #000; text-shadow: 1px 1px 0 #000; }

/* a narrow window (beside the bag on a small screen): more room for the list's names, a smaller picture */
.ux-win { container-type: inline-size; }
@container (max-width: 560px) {
  .ux-list, .ux-list.wide { flex-basis: 46%; }
  .ux-pic, .ux-pic img { width: 44px; height: 44px; }
  .ux-pg { padding: 8px 10px 12px; }
  .ux-pg h2 { font-size: 19px; }
  .ux-needs { grid-template-columns: 1fr; }
  .ux-foot .btn { min-width: 0; padding-left: 8px; padding-right: 8px; }
}

/* the dialogue (talking to someone): narrow, so their title goes under their name */
#quest-dialog.ux-framed > .qd-head { flex-direction: column; gap: 0; padding: 4px 40px 5px; min-height: 46px; }
#quest-dialog.ux-framed > .qd-head .qd-name { font-size: 21px; max-width: 100%; }
#quest-dialog.ux-framed > .qd-head .qd-title { font-size: 15px; line-height: 1; max-width: 100%; }
#quest-dialog.ux-framed > .qd-head .ux-emblem { top: 6px; }

/* an invitation (a party, a trade, a shared quest): the question box's look, Accept first */
#invite-box.ux-askbox { font: 19px var(--sans); color: #efe4c8; text-align: center; padding: 12px 16px; }
#invite-box.ux-askbox #invite-text { margin-bottom: 4px; }
#invite-box.ux-askbox .win-row { justify-content: center; flex-direction: row-reverse; gap: 10px; }
#invite-box.ux-askbox .btn.small { font-size: 18px; padding: 3px 14px; min-width: 96px; }

/* a list read at a larger size, with room between its rows (the moderators' places) */
.ux-list.roomy { font-size: 20px; }
.ux-list.roomy .ux-group { padding: 6px 8px 4px; font-size: 20px; }
.ux-list.roomy .ux-row { padding: 3px 8px 3px 26px; }
.ux-list.roomy .ux-gn { font-size: 16px; }
.ux-group .ux-gsub { color: #8a7e66; font-size: 15px; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a box to type in on a page (an answer, a name): the page's width, parchment-light */
.ux-pg .ux-text { display: block; width: 100%; margin: 2px 0 6px; font: 18px var(--sans); color: #2a1a08; background: #f6ecd0; border: 1px solid #8a6a2a; padding: 3px 6px; resize: vertical; user-select: text; -webkit-user-select: text; }
.ux-pg .ux-text:focus { outline: 2px solid #b08a44; outline-offset: 0; }
/* (a stamp never over the page's name) */
.ux-pg .ux-stamp ~ h2 { padding-right: 150px; }

/* a row under the one before it (a building inside a town, the moderators' places), a step further in */
.ux-row.child { padding-left: 34px; }
.ux-row.child2 { padding-left: 50px; }
.ux-list.roomy .ux-row.child { padding-left: 44px; }
.ux-list.roomy .ux-row.child2 { padding-left: 62px; }
.ux-row.child .ux-name { color: #c8b890; }

/* The character window (the user's, 24 Oct: "these icons ... are like out of bounds of the containers"):
   a slot's stone frame is 6px each side, so the slot is 56px for the item's 44px picture to sit whole
   inside it (it was 54px with the picture and a 4px margin, spilling past the frame's bottom and right) */
.doll-slot .islot { width: 56px; height: 56px; }
.doll-slot .islot img { width: 44px; height: 44px; margin: 0; }
/* on a screen too short for it all, the sheet scrolls as one, from the top (not the stats alone, half hidden) */
#char-win .cs-sheet { overflow-y: auto; overscroll-behavior: contain; }
#char-win .cs-more { flex: none; overflow: visible; }
/* and kept on the screen at a large interface size: left of the bag while there's room, else over it */
#char-win { right: clamp(8px, calc(100vw / var(--ui) - 488px), 334px); max-width: calc(100vw / var(--ui) - 16px); }
/* the bag, bank and chests: up the screen, then scrolling, when it's too short for them at a large interface size */
#bag-win { --bag-top: clamp(12px, calc(100vh / var(--ui) - 560px), 96px); top: var(--bag-top); max-height: calc(100vh / var(--ui) - var(--bag-top) - 8px); }
#bag-win .cs-bag { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#bank-win, #chest-win { --side-top: clamp(12px, calc(100vh / var(--ui) - 420px), 120px); top: var(--side-top); max-height: calc(100vh / var(--ui) - var(--side-top) - 8px); }
#bank-win .qd-body, #chest-win .qd-body { flex: 0 1 auto; min-height: 0; overscroll-behavior: contain; }

/* The shop (Tom's, 24 Oct: "a mix" of the old shop and the quest log): the old shop's rows on the stone,
   each thing's picture in its stone slot with its name and price; a click opens its page beside it, Buy at the foot */
.ux-win .ux-list.ux-shoplist { flex-basis: 44%; padding: 4px 6px; background: rgba(8, 7, 6, 0.55) var(--ui-stone-dark); font-size: 17px; }
.ux-shoplist .ux-group { padding: 7px 4px 3px; }
.ux-shoplist .ux-row { gap: 10px; padding: 4px 6px; white-space: normal; line-height: 1.15; border-bottom: 1px solid rgba(107, 84, 36, 0.3); }
.ux-shoplist .ux-row img.ux-ic { box-sizing: content-box; width: 36px; height: 36px; margin: 0; border: 6px solid transparent; border-image: var(--ui-frame-stone) 6 / 6px / 0 repeat; background: #1a1815; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); }
.ux-shoplist .ux-tag { flex: none; min-width: 54px; padding: 1px 6px; text-align: center; white-space: nowrap; color: #efe4c8; font-size: 15px; border: 4px solid transparent; border-image: var(--ui-frame-stone) 6 / 4px / 0 repeat; background: #2b2722; }
.ux-shoplist .ux-tag.bad { color: #ff9a7a; }
.ux-shoplist .ux-row.sel .ux-tag { color: #fff6d0; }
/* a window beside the bag (the shop, crafting) with no room for both at a large interface size: a usable width, over the bag */
@media (min-width: 761px) { #hud .ux-win.ux-withbag, .ux-win.ux-withbag { max-width: max(calc((100vw - 24px) / var(--ui) - 344px), min(calc((100vw - 24px) / var(--ui)), 420px)); } }
@container (max-width: 560px) {
  .ux-win .ux-list.ux-shoplist { flex-basis: 56%; padding: 2px 3px; font-size: 15px; }
  .ux-shoplist .ux-row { gap: 6px; padding: 3px 3px 3px 4px; }
  .ux-shoplist .ux-row img.ux-ic { width: 24px; height: 24px; border-width: 4px; border-image: var(--ui-frame-stone) 6 / 4px / 0 repeat; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4); }
  .ux-shoplist .ux-tag { min-width: 0; padding: 0 3px; font-size: 13px; border-width: 3px; border-image: var(--ui-frame-stone) 6 / 3px / 0 repeat; }
}