.world-loading { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, #382d20, #110e0c 70%); text-align: center; }
.world-loading.graphics-recovery { z-index: 81; color: #f0e4ca; font: 22px Georgia, serif; }
.world-loading[hidden], .world-loading button[hidden] { display: none; }
.maintenance-countdown { position: fixed; z-index: 46; top: max(4px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); color: #ffe1a4; pointer-events: none; }
.build-notice { z-index: 82; }
.build-notice .hall-window { padding: 22px 32px; }
.world-arrival {
  place-items: end center; box-sizing: border-box; overflow: auto;
  padding: 10px 16px max(5vh, env(safe-area-inset-bottom), 12px);
  background: linear-gradient(to bottom, transparent 48%, #100c08e8 100%),
    var(--arrival-art, none) center 40% / cover no-repeat, #211913;
}
.world-arrival .hall-window {
  width: min(460px, 100%); padding: 12px 18px; box-sizing: border-box;
  border-block: 1px solid #b18b55; border-radius: 0;
  background: linear-gradient(90deg, #201812c9, #211912ed 50%, #201812c9); box-shadow: 0 3px 14px #100b0773;
}
.world-arrival h2 { margin: 0 0 8px; font: 21px Georgia, serif; }
.world-arrival progress {
  display: block; appearance: none; box-sizing: border-box; width: 100%; height: 7px;
  border: 1px solid #907049; background: #19120d; color: #ca9f61;
  --bar-fill: linear-gradient(#eaca87, #b38546);
}
.world-arrival progress::-webkit-progress-bar { background: #19120d; }
.world-arrival progress::-webkit-progress-value { background: var(--bar-fill); }
.world-arrival progress::-moz-progress-bar { background: var(--bar-fill); }
.world-arrival p { margin: 8px 0 0; color: var(--soft); font-size: 13px; line-height: 1.35; }
.world-arrival button { margin-top: 8px; }

.settings-window .r2-window { width: 380px; height: 340px; }
.settings-window .hall-heading { margin: 12px 16px; }
.settings-window .hall-tabs { top: 47px; right: 12px; }
.settings-body { position: absolute; inset: 106px 18px 14px; overflow: auto; }
.settings-body label { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.settings-body label span { flex: 1; }
.settings-row output { min-width: 3em; text-align: right; }
.settings-body { color-scheme: dark; }
.settings-body .sound-row span { color: var(--ink); }
.settings-body .sound-row input { flex: 0 1 58%; }
.settings-body :is(select, input):focus-visible { outline: 2px solid #efc987; outline-offset: 3px; }
.settings-body select, .settings-body input[type=checkbox] {
  appearance: none; box-sizing: border-box; margin: 0; border: 1px solid var(--edge); border-radius: 3px;
  color: var(--ink); font: inherit; cursor: pointer;
  background-color: var(--well); box-shadow: inset 0 1px 2px #0009, 0 1px #ffffff0d;
}
.settings-body select {
  min-width: 124px; min-height: 32px; padding: 3px 30px 3px 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23caa366' stroke-width='1.6'/%3E%3C/svg%3E");
  background-position: right 10px center; background-repeat: no-repeat;
}
.settings-body select option { color: var(--ink); background: var(--well); }
.settings-body input[type=checkbox] { width: 22px; height: 22px; }
.settings-body input[type=checkbox]:checked {
  border-color: var(--accent); background-color: var(--active);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-9' fill='none' stroke='%23f2cd87' stroke-width='2'/%3E%3C/svg%3E");
}
.settings-body :is(select, input[type=checkbox]):hover { border-color: var(--accent); }
.settings-body input[type=range] {
  --rail: linear-gradient(to right, #be9252 var(--filled), #241b13 var(--filled));
  --grip: linear-gradient(135deg, #ffe5a5, #c49755 55%, #80552d);
  appearance: none; height: 32px; min-width: 0; margin: 0; cursor: pointer; background: transparent;
}
.settings-body input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border: 1px solid var(--edge); border-radius: 2px; background: var(--rail);
}
.settings-body input[type=range]::-moz-range-track {
  height: 4px; border: 1px solid var(--edge); border-radius: 2px; background: var(--rail);
}
.settings-body input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 14px; height: 14px; margin-top: -5px; transform: rotate(45deg);
  border: 1px solid #775732; border-radius: 2px; background: var(--grip); box-shadow: inset 0 0 0 1px #ffdf9966;
}
.settings-body input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid #775732; border-radius: 2px;
  background: var(--grip); box-shadow: inset 0 0 0 1px #ffdf9966;
}
@media (forced-colors: active) {
  .settings-body :is(select, input[type=checkbox], input[type=range]) { appearance: auto; }
}
html.desktop .settings-keyboard { display: none; }

/* Shared by the character window, NPC conversations, and the design stand. */
.hall-window {
  --panel: #211913; --well: #15110e; --ink: #f0e4ca; --soft: #cbb99d;
  --edge: #765c3e; --accent: #ca9f61; --active: #533626;
  background: radial-gradient(ellipse at top left,#423124,transparent 65%),var(--panel);
  color: var(--ink); border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--edge), 0 14px 44px #000a;
}
.hall-tabs {
  display: flex; position: absolute; left: 12px; right: 55px; top: 10px;
  height: 43px; align-items: stretch; border-bottom: 1px solid var(--edge);
}
.hall-tabs button {
  position: relative; flex: auto; padding: 0 5px; color: var(--soft); cursor: pointer;
  background: transparent; border: 0; font-family: inherit; font-size: 12px;
}
.hall-tabs button:hover { color: var(--ink); background: var(--well); }
.hall-tabs button[aria-pressed=true] {
  color: var(--ink); font-weight: 700;
  background: linear-gradient(0deg,var(--active),transparent 85%);
  box-shadow: 0 2px var(--accent);
}
.hall-tabs button[aria-pressed=true]::after {
  content: ""; position: absolute; width: 5px; height: 5px; bottom: -3px; left: calc(50% - 2.5px);
  transform: rotate(45deg); background: var(--accent);
}
.hall-close {
  position: absolute; top: 5px; right: 5px; width: 44px; height: 44px; z-index: 1;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--soft); font: inherit; font-size: 31px; line-height: 1; cursor: pointer;
}
.hall-close:hover { background: var(--active); color: var(--ink); }
.hall-close:focus-visible, .hall-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hall-window .cell {
  box-sizing: border-box; border: 1px solid #65513a; border-radius: 4px;
  background: linear-gradient(145deg,#241c16,#16120e 75%);
}
.hall-window .cell img { width: 44px; height: 44px; top: 2px; left: 2px; border-radius: 2px; }
.hall-window .cell.selected, .hall-window .cell:hover { border-color: var(--accent); }
.equipment-ghost::before {
  content: ""; position: absolute; inset: 3px; border-radius: 2px; pointer-events: none;
  background-image: var(--equipment-atlas,url("assets/ui/inv_wide.png"));
  background-position: var(--ghost-x) var(--ghost-y); background-repeat: no-repeat;
  filter: grayscale(1) brightness(1.65);
}
/* The assassin's off-hand holds a bracelet; use the circular jewellery silhouette. */
.bracelet-ghost::before { background-position: -177px -235px; }
.hall-window .bag-scroll { background: var(--well); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--edge); }
.sphere-orbit { position: absolute; width: 100%; max-width: 358px; height: 100%; fill: none; stroke: var(--edge); pointer-events: none; }
.hall-window .char-stats div { border-bottom: 1px solid #765c3e55; }
.hall-window .r2-button {
  background: var(--well); border: 1px solid var(--edge); border-radius: 3px; color: var(--ink);
}
.hall-window .r2-button:hover { background: var(--active); }
.npc-window.panel.hall-window { border: 0; padding: 15px 18px 16px; }
.hall-npc-name {
  font-size: 13px; font-weight: 700; color: #ecdcae; padding-right: 33px;
  min-height: 25px; overflow-wrap: anywhere;
}
.npc-window.hall-window .npc-text { border-top: 1px solid var(--edge); padding-top: 8px; }
.npc-window.hall-window .npc-choice { color: var(--ink); border-left: 2px solid var(--edge); padding-left: 8px; }
.npc-window.hall-window .npc-choice:hover { background: var(--active); border-color: var(--accent); }

.hall-heading {
  min-height: 38px; margin: 0 40px 8px 0; display: flex; align-items: center;
  border-bottom: 1px solid var(--edge); font-size: 14px; font-weight: 700;
}
.shop-window .hall-heading { position: absolute; inset: 0 55px auto 16px; height: 46px; margin: 0; }
.travel-window.hall-window { position: absolute; padding: 12px 16px 16px; box-sizing: border-box; max-height: calc(100dvh - 16px); }
.travel-window.hall-window.open { display: flex; flex-direction: column; }
.travel-list .r2-button { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; min-height: 36px; flex-shrink: 0; }
.travel-list .r2-button small { white-space: nowrap; font-weight: 400; color: var(--soft); }
.travel-list .craft-group { color: var(--accent); padding-top: 5px; }
.sphere-combine-window .combine-body { height: 258px; }
.sphere-combine-window .combine-slots { border-radius: 4px; background: radial-gradient(circle at 51% 58%, #553e25, transparent 62%), var(--well); }
.combine-slots::before {
  content: ""; position: absolute; left: 53px; top: 35px; width: 125px; height: 125px;
  border: 1px solid var(--edge); border-radius: 50%; pointer-events: none;
}
.sphere-combine-window .combine-choice { color: var(--ink); background: var(--well); border-color: var(--edge); border-radius: 4px; }
.sphere-combine-window .combine-choice:hover:not(:disabled) { background: var(--active); border-color: var(--accent); }
.combine-footer .r2-button:disabled { opacity: .5; }
.shop-stock { position: absolute; inset: 15px 0 0; }
.hall-window .shop-ware { width: 151px; text-align: left; color: var(--ink); cursor: pointer; }
.hall-window .shop-ware:disabled { visibility: hidden; }
.shop-ware .ware-name, .shop-ware .ware-price { left: 51px; right: 3px; width: auto; }
.shop-ware .ware-name { top: 2px; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shop-ware .ware-price { bottom: 2px; text-align: left; color: #dac398; font-variant-numeric: tabular-nums; }
.shop-ware .ware-price::before { content: "●"; margin-right: 4px; font-size: 9px; color: #c1bcb4; }
.shop-ware .plus { left: 3px; right: auto; }
.shop-ledger, .shop-sale-title {
  position: absolute; left: 17px; right: 16px; display: flex; align-items: center; justify-content: space-between;
}
.shop-ledger { height: 26px; border-block: 1px solid #765c3e66; color: var(--soft); font-size: 12px; }
.shop-balance { display: flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 700; }
.shop-balance img { width: 17px; height: 17px; }
.shop-sale-title { top: 324px; height: 21px; font-size: 13px; font-weight: 700; }
.shop-sale-title small { font-size: 11px; font-weight: 400; color: var(--soft); }
body:has(.shop-window.open) .item-panel {
  background: #251d17; border: 1px solid #765c3e; border-image: none; border-radius: 4px;
  padding: 12px; box-shadow: 0 7px 24px #0009; max-height: calc(100dvh - 12px); overflow-y: auto;
}
body:has(.shop-window.open) .item-panel .panel-title {
  position: static; margin: 0 36px 8px 0; min-height: 25px; white-space: normal;
}
body:has(.shop-window.open) .item-panel .win-close {
  inset: 0 0 auto auto; width: 44px; height: 44px; background: transparent; color: #cbb99d;
}
body:has(.shop-window.open) .item-panel .win-close::before { content: "×"; font-size: 30px; line-height: 1; }

/* The windows of the game's menu (craft, the shop, the quests, the tree) drawn as the auction and the
   bag are: the hall frame, its heading with the cross, wells for lists. Opened with .open. */
.hall-window.menu-window {
  position: absolute; z-index: 20; box-sizing: border-box; display: none; flex-direction: column;
  padding: 6px 16px 16px; transform-origin: center; font-size: 12px;
}
.hall-window.menu-window.open { display: flex; }
.menu-window > .hall-heading { flex: none; margin: 0 40px 12px 0; }
.menu-window .r2-button { min-height: 32px; font: inherit; font-weight: 700; }
.menu-window .r2-button:disabled { opacity: .45; cursor: default; }
.menu-window input[type=search] {
  height: 30px; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--well);
  border: 1px solid var(--edge); border-radius: 3px; padding: 0 8px; outline: none;
}
.menu-window input[type=search]:focus { border-color: var(--accent); }

/* «Создание предмета» */
.craft-window .craft-left { flex: 0 0 300px; min-width: 0; box-sizing: border-box; border-radius: 4px; background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); padding: 6px 8px 8px; }
.craft-window .craft-result, .craft-window .craft-mat { border-bottom-color: #765c3e55; padding: 5px 2px; }
.craft-window .craft-name { color: #f3e3bf; }
.craft-window .craft-name.small { color: var(--ink); }
.craft-window .craft-line, .craft-window .craft-silver.have { color: var(--soft); }
.craft-window .craft-silver { color: #f0cf7b; }
.craft-window .craft-slot { width: 44px; height: 44px; border: 1px solid #65513a; border-radius: 4px;
  background: linear-gradient(145deg,#241c16,#16120e 75%); }
.craft-window .craft-slot img { width: 36px; height: 36px; }
.craft-window .craft-slot:not(:disabled):hover { border-color: var(--accent); }
.craft-window .craft-slot.big { width: 52px; height: 52px; }
.craft-window .craft-slot.big img { width: 44px; height: 44px; }
.craft-window .craft-make:not(:disabled) { color: #fff2cc; background: linear-gradient(#7a5532, #4d321f); border-color: var(--accent); }
.craft-window .craft-tree { border-left: 0; padding-left: 0; min-height: 0; }
.craft-window .craft-search { gap: 6px; margin-bottom: 8px; }
.craft-window .craft-search input { height: 32px; }
.craft-window .craft-only { min-height: 32px; padding: 0 10px; font-size: 12px; }
.craft-window .craft-tree-list { border-radius: 4px; background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); padding: 4px; gap: 2px; }
.craft-window .craft-node, .craft-window .craft-row { flex-shrink: 0; }
.craft-window .craft-node { color: var(--ink); border-radius: 3px; }
.craft-window .craft-node:hover { background: var(--active); }
.craft-window .craft-node.d0 { border: 0; border-image: none; min-height: 30px; background: var(--panel); box-shadow: inset 0 0 0 1px #765c3e66; }
.craft-window .craft-node.d0.open { color: #f3e3bf; background: linear-gradient(0deg, var(--active), var(--panel)); box-shadow: inset 0 0 0 1px var(--edge); }
.craft-window .craft-node.d1 { color: var(--soft); }
.craft-window .craft-node span { color: var(--soft); }
.craft-window .craft-row { color: #9c8c74; border-radius: 3px; }
.craft-window .craft-row:hover { background: #533626aa; }
.craft-window .craft-row.ready { color: var(--ink); }
.craft-window .craft-row.current { border-color: var(--accent); background: var(--active); color: #fff2cc; }

/* the donation shop */
.donate-window .ds-head { color: var(--accent); margin: 4px 0 6px; }
/* the shop's tabs on top (the owner, 2026-11-08): in the flow under the heading, not over it as in the bag */
.donate-window .ds-tabs { position: static; flex: none; height: 38px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
.donate-window .ds-tabs::-webkit-scrollbar { display: none; }
.donate-window .ds-tabs button { flex: 1 0 auto; padding: 0 10px; white-space: nowrap; font-size: 12.5px; }
.donate-window .ds-head:not(:first-child) { margin-top: 12px; }
.donate-window .ds-ware { border: 1px solid #65513a; border-radius: 4px; background: linear-gradient(145deg,#241c16,#16120e 75%);
  color: var(--ink); padding: 8px 4px; }
.donate-window .ds-ware:hover { border-color: var(--accent); }
.donate-window .ds-ware.current { border-color: var(--accent); background: var(--active); }
.donate-window .ds-price { color: #f0cf7b; }

/* the quests */
.quest-journal .qj-head { color: var(--accent); margin: 2px 0 6px; }
.quest-journal .qj-head ~ .qj-head { margin-top: 12px; }
.quest-journal .qj-quest { background: var(--well); border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--edge); padding: 8px 10px; margin-bottom: 6px; }
.quest-journal .qj-quest:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.quest-journal .qj-quest b { color: #f3e3bf; }
.quest-journal .qj-quest b i { color: var(--accent); }
.quest-journal .qj-story { color: var(--ink); background: #ffffff08; border-left-color: var(--accent); }
.quest-journal .qj-line { color: var(--soft); }
.quest-journal .qj-line.done { color: #8fe08f; }
.quest-journal .qj-reward { color: #f0cf7b; }
.quest-journal .qj-done { color: var(--soft); padding: 2px 0; }
.qj-empty { padding: 30px 0; text-align: center; color: var(--soft); }

/* an item's details over the hall windows: the hall's look, not the old frame */
body:has(.donate-window.open) .item-panel {
  background: #251d17; border: 1px solid #765c3e; border-image: none; border-radius: 4px;
  padding: 12px; box-shadow: 0 7px 24px #0009; max-height: calc(100dvh - 12px); overflow-y: auto;
}
body:has(.donate-window.open) .item-panel .panel-title {
  position: static; margin: 0 36px 8px 0; min-height: 25px; white-space: normal;
}
body:has(.donate-window.open) .item-panel .win-close {
  inset: 0 0 auto auto; width: 44px; height: 44px; background: transparent; color: #cbb99d;
}
body:has(.donate-window.open) .item-panel .win-close::before { content: "×"; font-size: 30px; line-height: 1; }

/* Mobile combat controls share the joystick's quiet, translucent surface. */
#combat-controls { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#combat-controls button { pointer-events: auto; touch-action: none; }
#attack svg { width: 30px; height: 30px; vertical-align: middle; }
.touch-combat-skill { display: none; }
.chat-compose svg, .chat-compose .chat-mobile-label { display: none; }
html.touch .chat-compose svg, html.touch .chat-compose .chat-mobile-label { display: block; }
html.touch .chat-compose .chat-desktop-label { display: none; }
html.touch #combat-controls {
  inset: auto max(30px, calc(env(safe-area-inset-right) + 18px)) max(30px, calc(env(safe-area-inset-bottom) + 18px)) auto;
  width: 190px; height: 190px;
  --control-face: rgba(30, 25, 18, .62);
  --control-edge: rgba(183, 153, 99, .7);
  --control-ink: #e8dcc2;
}
html.touch #combat-controls button {
  position: absolute; display: grid; place-items: center; margin: 0; padding: 0; box-sizing: border-box;
  border: 1px solid var(--control-edge); border-radius: 50%;
  background: var(--control-face); color: var(--control-ink); box-shadow: none;
  font-family: inherit; overflow: hidden; -webkit-touch-callout: none;
}
html.touch #combat-controls button:active { background: rgba(100, 77, 40, .8); }
html.touch #combat-controls button:focus-visible { outline: 2px solid #e8c584; outline-offset: 3px; }
html.touch #combat-controls #attack { left: 114px; top: 114px; right: auto; bottom: auto; width: 76px; height: 76px; }
/* beside a villager the attack button is «?» (main.js updateTalkButton) */
html.touch #combat-controls #attack.talk { background: rgba(120, 92, 40, .78); border-color: #e8c584; color: #fff3d6; }
html.touch #combat-controls #attack.talk:active { background: rgba(160, 122, 52, .9); }
#attack.talk svg { width: 36px; height: 36px; }
html.touch #combat-controls #pk { left: 146px; top: -24px; right: auto; bottom: auto; width: 44px; min-width: 0; height: 44px; font-size: 13px; font-weight: 700; }
html.touch #combat-controls #pk small { display: none; }
html.touch #combat-controls #pk.on { background: rgba(129, 38, 30, .82); border-color: #db9784; color: #fff0dc; }
html.touch #combat-controls .touch-combat-skill { width: 44px; height: 44px; font-size: 25px; font-weight: 400; line-height: 1; }
/* Three inner slots and two staggered outer slots, with room for the thumb at the edge. */
html.touch .touch-combat-skill[data-slot="0"] { left: 44px; top: 130px; }
html.touch .touch-combat-skill[data-slot="1"] { left: 69px; top: 69px; }
html.touch .touch-combat-skill[data-slot="2"] { left: 130px; top: 44px; }
html.touch .touch-combat-skill[data-slot="3"] { left: 16px; top: 83px; }
html.touch .touch-combat-skill[data-slot="4"] { left: 83px; top: 16px; }
html.touch.hide-touch-slots #combat-controls .touch-combat-skill { display: none; }
html.touch.first-touch-row #combat-controls .touch-combat-skill[data-slot="3"],
html.touch.first-touch-row #combat-controls .touch-combat-skill[data-slot="4"] { display: none; }
html.desktop .settings-touch-slots { display: none; }
/* Draw the plus geometrically, independent of the font's baseline. */
html.touch #combat-controls .touch-combat-skill:not(.filled) { font-size: 0; }
.touch-combat-skill:not(.filled)::before, .touch-combat-skill:not(.filled)::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px;
  background: currentColor; border-radius: 1px; transform: translate(-50%, -50%); pointer-events: none;
}
.touch-combat-skill:not(.filled)::after { transform: translate(-50%, -50%) rotate(90deg); }
.touch-combat-skill img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.touch-combat-skill.is-skill img { transform: scale(1.28); }
.touch-combat-skill .num { position: absolute; bottom: 3px; left: 0; right: 0; color: #fff3d6; font: 700 12px system-ui, sans-serif; text-align: center; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
.touch-combat-skill.empty img { opacity: .3; }
.touch-combat-skill .shade { position: absolute; inset: 0 0 auto; height: 0; background: rgba(0, 0, 0, .65); pointer-events: none; }
.touch-combat-skill.nomp img { opacity: .4; }
html.touch #joy {
  left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box; border: 1px solid rgba(183, 153, 99, .6);
  background: rgba(30, 25, 18, .38); box-shadow: none;
}
html.touch #knob {
  left: calc(50% - 20px); top: calc(50% - 20px); width: 40px; height: 40px;
  box-sizing: border-box; border: 1px solid rgba(215, 190, 140, .7); background: rgba(148, 122, 75, .7);
  box-shadow: none;
}
html.touch .action-grid { right: calc(max(30px, calc(env(safe-area-inset-right) + 18px)) + 202px); }
html.touch:not(.chat-only) .chat {
  top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: min(280px, calc(100vw - 280px));
}
html.touch:not(.chat-only) .chat .chat-compose {
  align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 76px; height: 44px; padding: 0 12px; margin-top: 4px;
  pointer-events: auto; touch-action: manipulation; color: #e8dcc2;
  background: rgba(30, 25, 18, .62); border: 1px solid rgba(183, 153, 99, .7);
  border-radius: 5px; font: 13px system-ui, sans-serif;
}
.chat-compose svg { width: 19px; height: 19px; flex: none; }
html.touch:not(.chat-only) .chat.open {
  width: min(420px, calc(100vw - 24px - env(safe-area-inset-right)));
  max-height: calc(100dvh - 24px - env(safe-area-inset-top)); box-sizing: border-box;
}
html.touch:not(.chat-only) .chat.open .chat-lines { min-height: 0; max-height: min(210px, calc(100dvh - 110px)); }
html.touch:not(.chat-only) .chat.open .chat-compose { display: none; }
html.touch .chat-compose:focus-visible { outline: 2px solid #e8c584; outline-offset: 2px; }
/* what goes into a cell of the action grid or a touch button (actiongrid.js choose): a hall window */
.ag-picker.hall-window { box-sizing: border-box; width: min(270px, calc(100vw - 12px)); padding: 4px 10px 10px; }
.ag-picker .hall-heading { min-height: 40px; margin: 0 40px 8px 0; font-size: 13px; }
.ag-picker .hall-close { top: 2px; right: 2px; }
.ag-picker .ag-pick-list { gap: 3px; padding: 4px; border-radius: 4px; background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); }
.ag-picker .ag-pick { flex-shrink: 0; min-height: 36px; padding: 3px 6px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 3px; }
.ag-picker .ag-pick:hover { background: var(--active); border-color: var(--accent); }
.ag-picker .ag-pick img { border-radius: 3px; box-shadow: 0 0 0 1px #65513a; }
.ag-picker .item-desc { color: var(--soft); padding: 10px 6px; }
.touch-skill-picker { width: min(280px, calc(100vw - 12px)); }
.touch-skill-picker .ag-pick-list { max-height: min(230px, calc(100dvh - 130px)); }
.touch-skill-picker .ag-pick { min-height: 44px; padding: 6px; font-size: 13px; }
.touch-skill-picker .ag-pick img { width: 32px; height: 32px; }
.touch-skill-picker .touch-skill-clear { color: #cbb99d; margin-top: 6px; border-top-color: #765c3e; }
.touch-skill-hint { margin-top: 9px; color: #cbb99d; font-size: 11px; line-height: 1.4; }
html.chat-only #combat-controls { display: none; }
@media (max-height: 380px) {
  html.touch #joy { width: 112px; height: 112px; }
}

html .chat:has(.chat-line:not(.hidden):not(.old)) .chat-compose { display: none; }


.menu-feedback .menu-label { white-space: normal; max-width: 72px; line-height: 1.15; text-align: center; }
.feedback-window { position: fixed; z-index: 40; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(430px, calc(100vw - 24px)); box-sizing: border-box; padding: 8px 16px 16px; overflow-y: auto; }
.feedback-window[hidden] { display: none; }
.feedback-window .hall-heading { margin-right: 28px; }
.feedback-form, .feedback-form label { display: grid; gap: 8px; }
.feedback-form { gap: 12px; font-size: 14px; }
.feedback-form select, .feedback-form textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px;
  color: #e8dcc2; background: #1c150f; border: 1px solid #8b704c; border-radius: 4px; font: 16px system-ui, sans-serif; }
.feedback-form textarea { min-height: 110px; height: min(150px, 24dvh); resize: vertical; user-select: text; }
.feedback-form :focus-visible { outline: 2px solid #c9a25f; outline-offset: 2px; }
.feedback-form .r2-button { min-height: 44px; }
.feedback-note, .feedback-message { margin: 0; line-height: 1.4; }
.feedback-note { color: #cbb99d; font-size: 12px; }
.feedback-message { color: #f0cf7b; }
.feedback-message:empty { display: none; }
@media (max-height: 380px) {
  .feedback-form { gap: 7px; }
  .feedback-form textarea { min-height: 70px; }
}

/* An item's details everywhere (hud.js showItem; the owner, 2026-11-08: the old RuOff frame gave way to the
   game's own windows' look): the hall's dark leather and brass, the name in the menu's serif, what the item
   gives above its story, its weight at the foot, the things to do with it as buttons. */
.item-panel.panel {
  position: fixed; box-sizing: border-box; padding: 12px 14px 12px; border: 1px solid #765c3e; border-image: none;
  border-radius: 4px; background: linear-gradient(#2b2119, #1d1612); box-shadow: 0 8px 26px #000a, inset 0 1px 0 #ffe4b014;
  max-height: calc(100dvh - 12px); overflow-y: auto; color: #e2d5b8; font: 13px/1.4 system-ui, sans-serif;
}
.item-panel .panel-title {
  position: static; margin: 0 34px 8px 0; white-space: normal; overflow: visible;
  font: 400 17px/1.25 Georgia, "Times New Roman", serif; color: #ffedcf; text-shadow: 0 1px 2px #000;
}
.item-panel .win-close {
  position: absolute; inset: 4px 4px auto auto; width: 32px; height: 32px; border: 0; padding: 0;
  background: transparent; color: #b9a687; cursor: pointer;
}
.item-panel .win-close::before { content: "×"; font-size: 26px; line-height: 1; }
.item-panel .win-close:hover, .item-panel .win-close:active { background: transparent; color: #ffedcf; }
/* What a monster drops (hud.js DropsWindow, a right click or a long press on it), in the item panel's frame:
   each thing in a bag cell's well, its name, its chance in the brass of the windows' accents. */
.drops-window.item-panel { z-index: 31; padding-bottom: 8px; }
.drops-window .drops-list { border-top: 1px solid #765c3e55; padding-top: 4px; max-height: min(300px, calc(100dvh - 90px)); overflow-y: auto; }
.drops-window .drops-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; color: #e2d5b8; }
.drops-window .drops-row + .drops-row { border-top: 1px solid #765c3e2e; }
.drops-window .drops-row img { width: 30px; height: 30px; flex: none; box-sizing: border-box; border: 1px solid #765c3e; border-radius: 3px;
  background: #15110e; box-shadow: inset 0 1px 2px #0009; }
.drops-window .drops-name { flex: 1; min-width: 0; white-space: normal; line-height: 1.25; }
.drops-window .drops-row b { min-width: 44px; text-align: right; font: 600 12.5px/1 system-ui, sans-serif; color: #ca9f61;
  font-variant-numeric: tabular-nums; }
.drops-window .item-desc { margin: 6px 0 2px; }
.item-panel .item-stats { padding: 6px 0; border-block: 1px solid #765c3e55; }
.item-panel .item-line { margin: 1px 0; font-size: 13px; color: #e2d5b8; }
.item-panel .item-line.cmp { color: #b9a687; }
.item-panel .item-desc { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: #a99878; }
.item-panel .item-weight { margin-top: 8px; font-size: 12px; color: #b9a687; font-variant-numeric: tabular-nums; }
.item-panel .item-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.item-panel .pop-act {
  min-height: 32px; padding: 0 12px; border: 1px solid #765c3e; border-radius: 3px; background: #2c241b;
  color: #f0e4ca; font: 600 13px system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
.item-panel .pop-act:hover, .item-panel .pop-act:focus-visible { border-color: #c49b5c; background: #3a2e22; color: #fff2cc; outline: none; }
.item-panel .pop-act:active { transform: translateY(1px); }