/* ============================================================================
   ALDERMOOR — UI styles. Dark oak & brass frames, parchment text.
   ========================================================================== */
:root {
  --wood0: #120d09; --wood1: #1e1610; --wood2: #2b2016; --wood3: #3a2b1d;
  --brass: #b8924a; --brass2: #e2c27a; --brassd: #6d5428;
  --parch: #e9dcc0; --parch2: #b9a888; --ink: #f3e9d2;
  --hp: #c8322b; --hp2: #ff6a55; --mp: #2b5fc8; --mp2: #6aa0ff; --xp: #b48a1e; --xp2: #f1cf5a;
  --good: #8fe07a; --bad: #ff6b5b; --warn: #ffc65c; --sys: #d7cbb0; --quest: #f3d35a; --party: #7ad2ff; --guild: #8affb5; --event: #ff9f43;
  --ui-font: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --title-font: Georgia, "Palatino Linotype", "Book Antiqua", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--ink); font: 13px/1.35 var(--ui-font); user-select: none; -webkit-user-select: none; }
canvas#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M2 2 L2 16 L6 12 L9 18 L11 17 L8 11 L14 11 Z' fill='%23e2c27a' stroke='%23120d09' stroke-width='1.2'/></svg>") 2 2, default; }
canvas#view.target { cursor: crosshair; }
canvas#view.attack { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M3 3 L13 13 M3 3 L3 8 M3 3 L8 3 M11 15 L15 11 M14 14 L19 19' stroke='%23ff5040' stroke-width='2.4' fill='none'/></svg>") 3 3, crosshair; }
canvas#view.talk { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='20'><path d='M2 2 H20 V13 H9 L4 18 V13 H2 Z' fill='%23e9dcc0' stroke='%23120d09' stroke-width='1.4'/></svg>") 3 3, pointer; }
canvas#view.grab { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M5 9 V4 Q6 2 7.5 4 V8 V3 Q9 1 10.5 3 V8 V4 Q12 2.5 13.5 4.5 V9 V6 Q15 5 16 7 V12 Q16 18 10 18 Q6 18 4 14 L2 10 Q3 8 5 10 Z' fill='%23e2c27a' stroke='%23120d09' stroke-width='1.1'/></svg>") 8 8, pointer; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }
input { font: inherit; }

/* ------------------------------------------------------------------ frames */
.frame {
  background: linear-gradient(180deg, rgba(43,32,22,.96), rgba(22,16,11,.96));
  border: 2px solid var(--brassd);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(226,194,122,.25), 0 6px 18px rgba(0,0,0,.6);
  border-radius: 4px;
}
h2, h3 { font-family: var(--title-font); font-weight: normal; color: var(--brass2); letter-spacing: .5px; margin: 0 0 10px; text-shadow: 0 1px 0 #000; }
h2 { font-size: 20px; } h3 { font-size: 15px; margin-top: 10px; } h3 small { color: var(--parch2); font-size: 11px; }
.btn { background: linear-gradient(#4a3826, #2c2015); border: 1px solid var(--brassd); color: var(--parch); padding: 6px 14px; border-radius: 3px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,230,170,.15); }
.btn:hover { border-color: var(--brass); color: #fff; background: linear-gradient(#5b4530, #33251a); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(#7a5a24, #4a3410); border-color: var(--brass); color: #fff4d6; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 2px 8px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: default; }
.row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.row.tight { margin-top: 4px; }
.err { color: var(--bad); min-height: 18px; margin-top: 8px; text-align: center; }
.hint { color: var(--parch2); font-size: 12px; margin-top: 8px; text-align: center; }
.desc { color: var(--parch2); margin: 6px 0; } .desc.small { font-size: 11px; }
input:not([type]), input[type=password], input[type=text], input[type=number] { background: #0d0906; border: 1px solid var(--brassd); color: var(--ink); padding: 6px 8px; border-radius: 3px; width: 100%; outline: none; }
input:focus { border-color: var(--brass); }
label { display: block; margin: 8px 0; color: var(--parch2); font-size: 12px; }
label input { margin-top: 3px; }

/* ----------------------------------------------------------------- screens */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; }
.screen > canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: -1; }
.logo { text-align: center; margin-bottom: 26px; }
.logo span { font-family: var(--title-font); font-size: 64px; letter-spacing: 10px; color: #f6dc9a; text-shadow: 0 0 2px #000, 0 3px 0 #5a3d12, 0 6px 18px rgba(0,0,0,.9), 0 0 40px rgba(240,180,80,.35); }
.logo small { display: block; font-family: var(--title-font); font-style: italic; color: var(--parch); font-size: 16px; letter-spacing: 3px; text-shadow: 0 2px 6px #000; }
.logo.small span { font-size: 36px; letter-spacing: 6px; }
.login { width: 340px; padding: 22px 26px; }
.chars { width: 560px; padding: 22px; }
#charlist { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.charrow { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: rgba(0,0,0,.35); border: 1px solid #3a2b1d; border-radius: 3px; cursor: pointer; }
.charrow:hover { border-color: var(--brass); background: rgba(80,60,30,.35); }
.charrow canvas { width: 48px; height: 60px; image-rendering: pixelated; }
.charrow .ci { flex: 1; } .charrow .cn { font-family: var(--title-font); font-size: 17px; color: var(--brass2); } .charrow .cs { color: var(--parch2); font-size: 12px; }
.charrow .del { opacity: .5; } .charrow .del:hover { opacity: 1; color: var(--bad); }
.create { width: 760px; padding: 20px 24px; max-height: 96vh; overflow: auto; }
.create-grid { display: flex; gap: 22px; }
.create-left { width: 220px; text-align: center; }
.create-left canvas { background: radial-gradient(#3d5a2b, #1b2913); border: 1px solid var(--brassd); image-rendering: pixelated; width: 160px; height: 200px; }
.cc-opts > div { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; color: var(--parch2); font-size: 12px; }
.swatches { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; max-width: 130px; }
.swatches i { width: 15px; height: 15px; border: 1px solid #000; cursor: pointer; display: inline-block; }
.swatches i.on { outline: 2px solid var(--brass2); }
.create-right { flex: 1; }
#cc-callings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.calling { padding: 7px; background: rgba(0,0,0,.35); border: 1px solid #3a2b1d; border-radius: 3px; cursor: pointer; text-align: center; font-family: var(--title-font); color: var(--parch); }
.calling.on { border-color: var(--brass2); background: rgba(120,90,30,.35); color: #fff; }
#cc-stats .st { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
#cc-stats .st b { width: 40px; color: var(--brass2); } #cc-stats .st span { width: 30px; text-align: center; }
.loadbox { width: 380px; padding: 22px; text-align: center; }
.bar { position: relative; height: 12px; background: #0b0806; border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.bar > div { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width .15s; }
.bar > span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 11px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.loadbox .bar > div { background: linear-gradient(var(--xp2), var(--xp)); }

/* --------------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
/* HUD frames drag anywhere (ui.mjs initHudDrag): the grip shows on hover */
.hudgrip { position: absolute; left: -8px; top: -8px; width: 15px; height: 15px; line-height: 13px; font-size: 11px; text-align: center; color: var(--parch);
  background: linear-gradient(#3a2b1d, #1e1610); border: 1px solid var(--brassd); border-radius: 3px; cursor: move; opacity: 0; transition: opacity .15s; z-index: 6; user-select: none; }
[data-hud-drag]:hover > .hudgrip, .hud-dragging > .hudgrip { opacity: .95; }
body.hudlocked .hudgrip { display: none; }
.hud-dragging { outline: 1px dashed var(--brass2); outline-offset: 2px; }
#vitals { position: absolute; left: 10px; top: 10px; padding: 6px; display: flex; gap: 8px; width: 290px; }
#portrait { width: 56px; height: 56px; image-rendering: pixelated; background: radial-gradient(#3a2b1d, #120d09); border: 1px solid var(--brassd); }
.vit-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vname { font-family: var(--title-font); color: var(--brass2); font-size: 14px; white-space: nowrap; overflow: hidden; }
.vname .lv { color: var(--parch2); font-size: 11px; font-family: var(--ui-font); }
.bar.hp > div { background: linear-gradient(var(--hp2), var(--hp)); }
.bar.mp > div { background: linear-gradient(var(--mp2), var(--mp)); }
.bar.xp { height: 10px; } .bar.xp > div { background: linear-gradient(var(--xp2), var(--xp)); } .bar.xp > span { font-size: 9px; line-height: 9px; letter-spacing: .02em; }
#buffs { position: absolute; left: 0; top: calc(100% + 6px); display: flex; gap: 3px; flex-wrap: wrap; width: 300px; }
#buffs .buff { width: 26px; height: 26px; border: 1px solid var(--brassd); background-size: cover; image-rendering: pixelated; position: relative; }
#buffs .buff.bad { border-color: #a33; }
#buffs .buff span { position: absolute; right: 1px; bottom: 2px; font-size: 9px; text-shadow: 0 0 2px #000, 0 0 2px #000; }
#buffs .buff .tm { position: absolute; left: 0; bottom: 0; height: 2px; background: #e8d090; box-shadow: 0 0 2px #000; }
#buffs .buff.bad .tm { background: #ff6a55; }
#buffs .buff .tm.ward { background: #8fd0ff; }
.bar.sh { height: 8px; margin-top: 1px; } .bar.sh > div { background: linear-gradient(#cdeeff, #4f94e6); } .bar.sh > span { font-size: 8px; line-height: 8px; }
#targetframe { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 260px; padding: 5px 8px; text-align: center; }
#targetframe .tclose { position: absolute; right: 3px; top: 1px; background: none; border: 0; padding: 0 4px; color: var(--parch); font-size: 15px; line-height: 18px; cursor: pointer; opacity: .65; }
#targetframe .tclose:hover { opacity: 1; color: #fff; }
#targetframe .tname { font-family: var(--title-font); color: var(--parch); margin-bottom: 3px; white-space: nowrap; overflow: hidden; }
#targetframe.hostile .tname { color: #ff8a70; } #targetframe.boss { border-color: #c33; box-shadow: 0 0 12px rgba(255,40,20,.5); }
#targetframe .tlore { margin-top: 4px; padding-top: 3px; border-top: 1px solid rgba(232,208,144,.18); text-align: left; font-size: 11px; line-height: 15px; color: var(--parch); cursor: help; }
#targetframe .tlore .k { color: var(--brass2); } #targetframe .tlore .sep { opacity: .5; } #targetframe .tlore .lk { opacity: .55; font-style: italic; }
#targetframe .tlore .lr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#targetframe.lore-flash { animation: loreflash .6s ease-out; } @keyframes loreflash { 0% { box-shadow: 0 0 0 rgba(143,220,255,0); } 30% { box-shadow: 0 0 14px rgba(143,220,255,.65); } 100% { box-shadow: 0 0 0 rgba(143,220,255,0); } }
#minimap-wrap { position: absolute; right: 10px; top: 10px; padding: 5px; width: 192px; }
#minimap { width: 180px; height: 180px; display: block; image-rendering: pixelated; border: 1px solid #000; border-radius: 50%; cursor: pointer; }
#mm-info { display: flex; justify-content: space-between; font-size: 11px; margin-top: 3px; color: var(--parch); }
#mm-place { color: var(--brass2); font-family: var(--title-font); white-space: nowrap; overflow: hidden; max-width: 120px; }
#mm-coords { font-size: 10px; color: var(--parch2); text-align: center; }
#partyframe { position: absolute; left: 10px; top: 110px; display: flex; flex-direction: column; gap: 3px; }
#partyframe .pm { width: 170px; padding: 3px 6px; font-size: 11px; cursor: pointer; }
#partyframe .pm .bar { height: 6px; margin-top: 2px; }
#hotbar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; padding: 5px; }
.hotrow { display: flex; gap: 4px; align-items: center; }
.hottog { width: 16px; height: 42px; background: #1a130d; border: 1px solid #4a3826; color: var(--brass2); cursor: pointer; padding: 0; font-size: 11px; }
.hottog:hover { border-color: var(--brass); }
.hotrow .hotrow { gap: 4px; }
.slot { width: 42px; height: 42px; background: #0d0906 center/36px no-repeat; border: 1px solid #4a3826; box-shadow: inset 0 0 6px #000; position: relative; image-rendering: pixelated; border-radius: 2px; }
.slot:hover { border-color: var(--brass); }
.slot .key { position: absolute; left: 2px; top: 0; font-size: 10px; color: var(--brass2); text-shadow: 0 0 2px #000; }
.slot .n { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.slot .cd { position: absolute; inset: 0; background: rgba(0,0,0,.65); transform-origin: bottom; }
.slot.drop { border-color: var(--brass2); box-shadow: 0 0 6px var(--brass2); }
#actbar { position: absolute; left: 50%; bottom: 122px; transform: translateX(-50%); width: 220px; height: 14px; background: #0b0806; border: 1px solid var(--brassd); }
#actbar > div { height: 100%; background: linear-gradient(#e2c27a, #8a6a2a); width: 0; }
#actbar > span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 12px; text-shadow: 0 0 2px #000; }
#chat { position: absolute; left: 10px; bottom: 10px; width: 470px; height: 220px; display: flex; flex-direction: column; padding: 4px; background: linear-gradient(180deg, rgba(20,15,10,.72), rgba(14,10,7,.86)); }
#chat-tabs { display: flex; gap: 2px; margin-bottom: 3px; }
#chat-tabs button { background: #1a130d; border: 1px solid #3a2b1d; color: var(--parch2); font-size: 11px; padding: 1px 8px; cursor: pointer; border-radius: 2px; }
#chat-tabs button.on { color: var(--brass2); border-color: var(--brassd); }
#chat-log { flex: 1; overflow-y: auto; font-size: 12px; padding: 2px 4px; user-select: text; -webkit-user-select: text; word-wrap: break-word; }
#chat-log div { text-shadow: 0 1px 1px #000; }
#chat-log .s { color: #fff; } #chat-log .e { color: #ffd8a8; font-style: italic; } #chat-log .n { color: #b6f0a0; } #chat-log .w { color: var(--party); }
#chat-log .t, #chat-log .to { color: #ff9ce6; } #chat-log .g { color: var(--guild); } #chat-log .a { color: #5fe0c0; } #chat-log .y { color: #ffb347; } #chat-log .b { color: #ff7b7b; }
#chat-log .sys { color: var(--sys); } #chat-log .good { color: var(--good); } #chat-log .bad { color: var(--bad); } #chat-log .warn { color: var(--warn); } #chat-log .quest { color: var(--quest); } #chat-log .party { color: var(--party); } #chat-log .guild { color: var(--guild); } #chat-log .event { color: var(--event); font-weight: bold; }
#chat-log b { color: var(--brass2); font-weight: normal; }
#chat-input { margin-top: 3px; padding: 4px 6px !important; background: rgba(0,0,0,.6) !important; }
#menubtns { position: absolute; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(4, 47px); gap: 3px; }
#menubtns button { height: 26px; padding: 0 2px; white-space: nowrap; background: linear-gradient(#3a2b1d, #1e1610); border: 1px solid var(--brassd); color: var(--parch); font-size: 11px; cursor: pointer; border-radius: 2px; }
#menubtns button:hover, #menubtns button.on { color: #fff; border-color: var(--brass2); }

/* ------------------------------------------------------------------ panel */
.dockpanel { position: absolute; right: 10px; top: 236px; bottom: 100px; width: 300px; display: flex; flex-direction: column; pointer-events: auto; }
.dockpanel .ptitle { cursor: grab; user-select: none; }
.dockpanel.floating { resize: both; overflow: hidden; min-width: 220px; min-height: 160px; box-shadow: 0 6px 24px rgba(0,0,0,.55); }
.ptitle { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-bottom: 1px solid var(--brassd); font-family: var(--title-font); color: var(--brass2); font-size: 15px; cursor: default; }
.ptitle .x { background: none; border: none; color: var(--parch2); font-size: 18px; cursor: pointer; line-height: 1; }
.ptitle .x:hover { color: #fff; }
.pbody { flex: 1; overflow-y: auto; padding: 8px; }
.grid { display: grid; grid-template-columns: repeat(5, 46px); gap: 4px; justify-content: center; }
.gold { color: #ffd76a; margin: 8px 0; display: flex; justify-content: space-between; align-items: center; }
.paperdoll { display: grid; grid-template-columns: 46px 1fr 46px; gap: 4px; align-items: center; }
.paperdoll canvas { width: 120px; height: 150px; image-rendering: pixelated; margin: 0 auto; display: block; background: radial-gradient(rgba(80,60,30,.5), transparent 70%); }
.paperdoll .col { display: flex; flex-direction: column; gap: 4px; }
.eqrow { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.statgrid { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 8px; margin-top: 8px; align-items: center; }
.statgrid .k { color: var(--parch2); } .statgrid .v { color: #fff; text-align: right; }
.statgrid button { padding: 0 6px; font-size: 11px; }
.reslist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 6px; font-size: 11px; color: var(--parch2); margin-top: 6px; }
.skillcat { color: var(--brass2); font-family: var(--title-font); margin: 8px 0 3px; border-bottom: 1px solid #3a2b1d; }
.skill { display: flex; align-items: center; gap: 6px; padding: 2px 3px; border-radius: 2px; }
.skill:hover { background: rgba(255,255,255,.05); }
.skill .ic { width: 24px; height: 24px; background-size: cover; image-rendering: pixelated; flex: none; }
.skill.active .ic { cursor: grab; outline: 1px solid var(--brassd); }
.skill .nm { flex: 1; } .skill .vl { color: #fff; width: 44px; text-align: right; } .skill .rk { color: var(--parch2); font-size: 10px; width: 70px; text-align: right; }
.skill .sbar { height: 3px; background: #0b0806; margin-top: 1px; } .skill .sbar div { height: 100%; background: var(--brass); }
.spell { display: flex; align-items: center; gap: 6px; padding: 3px; border-bottom: 1px solid rgba(255,255,255,.04); }
.spell .ic { width: 32px; height: 32px; background-size: cover; image-rendering: pixelated; cursor: grab; flex: none; }
.spell .sn { flex: 1; } .spell .sn small { display: block; color: var(--parch2); font-size: 10px; }
.school { color: var(--brass2); font-family: var(--title-font); margin: 8px 0 3px; }
.quest { padding: 5px; border: 1px solid #3a2b1d; margin-bottom: 4px; border-radius: 2px; cursor: pointer; }
.quest .qn { color: var(--quest); } .quest .qs { color: var(--parch2); font-size: 12px; }

/* ----------------------------------------------------------------- windows */
.win { position: absolute; min-width: 260px; display: flex; flex-direction: column; max-height: 80vh; }
.win .ptitle { cursor: move; }
.win .pbody { max-height: 70vh; }
.shoprow, .lrow { display: flex; align-items: center; gap: 8px; padding: 3px; border-bottom: 1px solid rgba(255,255,255,.04); }
.shoprow:hover, .lrow:hover { background: rgba(255,255,255,.05); }
.shoprow .slot, .lrow .slot { width: 36px; height: 36px; background-size: 32px; flex: none; }
.shoprow .nm, .lrow .nm { flex: 1; }
.shoprow .pr { color: #ffd76a; min-width: 60px; text-align: right; }
.tabs { display: flex; gap: 2px; margin-bottom: 6px; }
.tabs button { flex: 1; background: #1a130d; border: 1px solid #3a2b1d; color: var(--parch2); padding: 3px; cursor: pointer; }
.tabs button.on { color: var(--brass2); border-color: var(--brassd); }
.npcline { font-style: italic; color: var(--parch); margin-bottom: 8px; font-family: var(--title-font); }
.svc { display: flex; flex-direction: column; gap: 4px; }
.svc .btn { text-align: left; }
.qbox p { color: var(--parch); white-space: pre-wrap; font-family: var(--title-font); }
.qbox ul { margin: 4px 0; padding-left: 18px; color: var(--parch2); }
.qbox li.done { color: var(--good); text-decoration: line-through; }
.rewards { color: #ffd76a; font-size: 12px; }
.mapwin canvas { image-rendering: pixelated; display: block; cursor: crosshair; }

/* ---------------------------------------------------------------- tooltip */
#tooltip { position: fixed; z-index: 2147483000; pointer-events: none; max-width: 300px; padding: 6px 9px; background: rgba(12,9,6,.96); border: 1px solid var(--brass); border-radius: 3px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.8); }
#tooltip .tt-n, .ttbox .tt-n { font-family: var(--title-font); font-size: 14px; }
.ttbox { padding: 4px 2px 8px; font-size: 12px; } .ttbox .tt-t, .ttbox .tt-d { color: var(--parch2); font-size: 11px; } .ttbox .tt-d { font-style: italic; margin-top: 4px; }
.ttbox .tt-s { color: #fff; } .ttbox .tt-m { color: var(--good); } .ttbox .tt-r { color: #9fd0ff; } .ttbox .tt-v { color: #ffd76a; } .ttbox .tt-x { color: var(--bad); }
#tooltip .tt-t { color: var(--parch2); font-size: 11px; }
#tooltip .tt-s { color: #fff; } #tooltip .tt-m { color: var(--good); } #tooltip .tt-r { color: #9fd0ff; } #tooltip .tt-d { color: var(--parch2); font-style: italic; margin-top: 4px; } #tooltip .tt-v { color: #ffd76a; } #tooltip .tt-x { color: var(--bad); }
#ctxmenu { position: fixed; z-index: 2147482000; padding: 3px; background: rgba(20,15,10,.97); border: 1px solid var(--brass); border-radius: 3px; min-width: 130px; }
#ctxmenu div { padding: 4px 10px; cursor: pointer; } #ctxmenu div:hover { background: rgba(184,146,74,.25); color: #fff; }
#ctxmenu .h { color: var(--brass2); cursor: default; font-family: var(--title-font); border-bottom: 1px solid #3a2b1d; } #ctxmenu .h:hover { background: none; }
#toasts { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.toast { font-family: var(--title-font); font-size: 20px; color: var(--brass2); text-shadow: 0 2px 4px #000, 0 0 12px rgba(0,0,0,.8); animation: toast 3.2s forwards; }
.toast.big { font-size: 30px; color: #ffe08a; }
.toast.zone { font-size: 26px; letter-spacing: 3px; color: #f3e9d2; }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 10% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
#deathveil { position: absolute; inset: 0; background: radial-gradient(rgba(60,0,0,.2), rgba(20,0,0,.85)); display: flex; align-items: center; justify-content: center; pointer-events: none; }
#deathveil .dv-box { pointer-events: auto; text-align: center; max-width: 440px; padding: 18px; }
#deathveil .dv-title { font-family: var(--title-font); font-size: 48px; color: #d33; text-shadow: 0 0 20px #000; letter-spacing: 4px; }
#deathveil .dv-sub { color: var(--parch); font-size: 13px; margin: 8px 0 16px; text-shadow: 0 1px 3px #000; }
#deathveil .row { justify-content: center; gap: 10px; }
#deadbar { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); background: rgba(40,6,6,.88); border: 1px solid #7a2a2a; border-radius: 6px; padding: 6px 10px; display: flex; gap: 10px; align-items: center; color: #f0c0b0; font-size: 13px; z-index: 50; }
.rollwin .pbody { display: flex; gap: 8px; align-items: center; }
::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background: #0d0906; } ::-webkit-scrollbar-thumb { background: #4a3826; border-radius: 4px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; } .keys b { color: var(--brass2); font-weight: normal; }
.optrow { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; gap: 8px; }
.optrow input[type=range] { width: 130px; }
.ladder td { padding: 2px 6px; } .ladder tr.on td:first-child::after { content: ' •'; color: var(--good); }

@media (max-width: 1500px) {
  #hotbar { left: auto; right: 232px; transform: none; }
  #actbar { left: auto; right: 300px; transform: none; }
}
@media (max-width: 1240px) {
  #chat { width: 330px; height: 190px; }
  .slot { width: 36px; height: 36px; background-size: 30px; }
  .hottog { height: 36px; } .hotside { height: 36px; }
}
@media (max-width: 900px) {
  #hotbar { right: 10px; bottom: 72px; }
  .slot { width: 30px; height: 30px; background-size: 26px; }
  #chat { width: 300px; height: 170px; }
}

/* ---- v2 HUD: quest tracker, tips, codex ---- */
#qtrack { position: absolute; right: 10px; top: 232px; width: 236px; display: flex; flex-direction: column; gap: 3px; pointer-events: auto; }
#qtrack .qt { background: rgba(14,10,7,.72); border-left: 3px solid var(--quest); padding: 3px 7px; cursor: pointer; border-radius: 2px; }
#qtrack .qt.contract { border-left-color: #c9a74a; }
#qtrack .qt.story { border-left-color: #a888e8; background: rgba(22,16,34,.78); }
#qtrack .qt.story .qtn { color: #e2d0ff; }
#qtrack .qt:hover { background: rgba(40,30,18,.85); }
#qtrack .qtn { color: var(--quest); font-family: var(--title-font); font-size: 13px; }
#qtrack .qts { color: var(--parch); font-size: 11px; }
#qtrack .qtd { color: #9fd0ff; font-size: 11px; }
body.panel-open #qtrack { display: none; }
/* skills tracked on screen (hud2.mjs skillRows), under the quests */
#qtrack .qt.sk { border-left-color: #6aa8e8; position: relative; cursor: default; }
#qtrack .qt.sk .skl { display: flex; align-items: center; gap: 5px; }
#qtrack .qt.sk .ski { width: 16px; height: 16px; flex: none; background-size: cover; image-rendering: pixelated; }
#qtrack .qt.sk .skn { flex: 1; min-width: 0; color: #cfe4ff; font-family: var(--title-font); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#qtrack .qt.sk .skv { color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
#qtrack .qt.sk .skv small { color: var(--parch2); font-size: 10px; }
#qtrack .qt.sk .sku { color: #8fe07a; font-size: 10px; }
#qtrack .qt.sk .skb { height: 3px; background: #0b0806; margin: 2px 0 1px; }
#qtrack .qt.sk .skb div { height: 100%; background: linear-gradient(90deg, #4a7ab8, #8ac4ff); }
#qtrack .qt.sk.gain { animation: skgain 1.2s ease-out; }
@keyframes skgain { from { background: rgba(70,140,60,.9); } to { background: rgba(14,10,7,.72); } }
#qtrack .skup { position: absolute; right: 6px; top: -2px; color: #8fe07a; font: bold 12px var(--ui-font); text-shadow: 0 1px 2px #000; pointer-events: none; animation: skfloat 1.4s ease-out forwards; }
@keyframes skfloat { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-16px); opacity: 0; } }
#qtrack .qthead.skhead { margin-top: 3px; }
/* the Skills panel: the value over its rank, and the Track button */
.skill .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill .vk { display: flex; flex-direction: column; align-items: flex-end; width: 62px; flex: none; line-height: 1.15; }
.skill .vk .vl, .skill .vk .rk { width: auto; }
.skill .vk .rk { font-size: 9px; }
.skill .trackbtn { flex: none; background: #1a130d; border: 1px solid #4a3a28; color: var(--parch2); font-size: 10px; padding: 1px 5px; border-radius: 2px; cursor: pointer; white-space: nowrap; }
.skill .trackbtn:hover { border-color: var(--brass); color: var(--parch); }
.skill .trackbtn.on { color: #8fe07a; border-color: #4a6a3a; }
.tipcard { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); width: 420px; padding: 10px 14px; z-index: 30; animation: toast 0.4s; }
.tipcard .tiptitle { color: var(--brass2); font-family: var(--title-font); }
.tipcard .tiptext { color: var(--parch); margin: 4px 0; }
.codexsplit { display: flex; gap: 10px; margin-top: 6px; height: 60vh; }
.codexlist { width: 210px; overflow-y: auto; flex: none; }
.codexlist .ce { padding: 2px 6px; cursor: pointer; color: var(--parch); border-radius: 2px; }
.codexlist .ce:hover, .codexlist .ce.on { background: rgba(184,146,74,.22); color: #fff; }
.codexpage { flex: 1; overflow-y: auto; padding: 0 8px; color: var(--parch); user-select: text; -webkit-user-select: text; }
.codexpage h4 { color: var(--brass2); margin: 10px 0 4px; font-family: var(--title-font); font-weight: normal; }
.codexpage kbd { background: #2b2016; border: 1px solid var(--brassd); border-radius: 3px; padding: 0 4px; font-size: 11px; }
.codexbody { min-height: 60vh; }
.bestiary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 58vh; overflow-y: auto; margin-top: 6px; }
.bestiary .be { display: flex; gap: 8px; background: rgba(0,0,0,.25); border: 1px solid #3a2b1d; padding: 4px; border-radius: 3px; }
.bestiary canvas { width: 64px; height: 64px; image-rendering: pixelated; flex: none; }
.bestiary .bi { flex: 1; min-width: 0; }

#updveil { position: fixed; inset: 0; z-index: 2147483600; background: rgba(8,6,4,.72); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--brass2); font-family: var(--title-font); font-size: 22px; }
#updveil small { color: var(--parch); font-size: 13px; font-family: var(--ui-font); }


.slot .auto { position: absolute; top: 0; right: 2px; font-size: 9px; font-weight: bold; color: #7fd0ff; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.spell .autobtn { margin-left: auto; font-size: 10px; padding: 1px 6px; opacity: .75; }
.spell .autobtn.on { opacity: 1; color: #7fd0ff; border-color: #4a8ab0; }

.skillcat.toggle { cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; user-select: none; }
.skillcat.toggle:hover { color: #fff; }
.skillcat.toggle small { font-family: var(--ui-font); font-size: 10px; opacity: .6; }
.skillcat.toggle.collapsed { opacity: .75; }
.skill { position: relative; }
.skill .hidebtn { background: none; border: none; color: var(--parch2); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; margin-left: 4px; opacity: 0; }
.skill:hover .hidebtn { opacity: .7; } .skill .hidebtn:hover { opacity: 1; color: #fff; }
.skill.hiddenskill { opacity: .45; } .skill.hiddenskill .hidebtn { opacity: .8; }
.skillbar-opts { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin: 4px 0 2px; }
.skillbar-opts label { cursor: pointer; display: flex; align-items: center; gap: 4px; }

.slot.bagslot { background-color: rgba(120,90,40,.28); }
.bagline { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--parch); margin-top: 6px; }

/* ---- unidentified items & identify reels ---- */
.slot.unid { animation: unidglow 1.6s ease-in-out infinite; }
@keyframes unidglow { 50% { filter: brightness(1.35) saturate(1.3); } }
.slot .unidq { position: absolute; right: 3px; top: 1px; font: bold 11px var(--title-font); color: #fff4c0; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.slot.exalted { animation: exglow 1.2s ease-in-out infinite; }
@keyframes exglow { 50% { box-shadow: inset 0 0 10px #ff6a3a, 0 0 8px #ff6a3a; } }
.idwin { position: relative; overflow: hidden; }
.idhead { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.idicon { width: 52px; height: 52px; background-size: 44px; transition: box-shadow .4s; }
.idtitle { font-family: var(--title-font); font-size: 19px; color: var(--brass2); }
.reel { margin: 4px 0; padding: 6px 10px; border: 1px solid #4a3826; border-radius: 4px; background: linear-gradient(#120d08, #20170f 50%, #120d08); text-align: center; font-size: 14px; letter-spacing: .5px; min-height: 18px; overflow: hidden; }
.reel.qreel { font-family: var(--title-font); font-size: 20px; letter-spacing: 3px; }
.reel.landed { border-color: currentColor; box-shadow: 0 0 10px currentColor inset; animation: reelpop .35s ease-out; }
.reel.qreel.landed.t3 { animation: reelpop .35s ease-out, exglow 1s ease-in-out infinite; }
@keyframes reelpop { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
.idbanner { text-align: center; font-family: var(--title-font); min-height: 4px; }
.idbanner.up { font-size: 18px; margin: 6px 0; animation: reelpop .5s ease-out; }
.idbanner.up.t2 { color: #ffd23a; } .idbanner.up.t3 { color: #ff6a3a; text-shadow: 0 0 8px #ff6a3a; }
.idbtns { flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: center; }
.idcompare { display: flex; gap: 12px; width: 100%; margin-bottom: 6px; }
.idcol { flex: 1; background: rgba(0,0,0,.25); padding: 6px; border-radius: 4px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -10px; width: 6px; height: 10px; border-radius: 1px; animation: fall linear forwards; }
@keyframes fall { to { top: 105%; transform: rotate(720deg) translateX(30px); opacity: .7; } }

.hotside { display: flex; flex-direction: column; gap: 2px; height: 42px; }
.hotside .hottog { height: auto; flex: 1; min-height: 0; line-height: 1; }
.hottog.autotog { font-size: 12px; opacity: .5; }
.hottog.autotog.on { opacity: 1; color: #ffd76a; text-shadow: 0 0 4px #ff9a2a; }

#chat-log .xp { color: #c8a8ff; }

.mapbar { align-items: center; gap: 6px; margin-bottom: 6px; }

.mapwin { max-height: none; }
.mapwin .pbody { max-height: none; overflow: hidden; }
/* the world map on a phone or a tablet: the whole screen, its buttons over it (ui.mjs toggleWorldMap) */
.win.mapfull { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #000; overflow: hidden !important; z-index: 48 !important; }
.win.mapfull .ptitle { position: absolute; left: 0; right: 0; top: 0; z-index: 2; border: 0; padding: calc(4px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 14px calc(12px + env(safe-area-inset-left)); background: linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,0)); pointer-events: none; text-shadow: 0 1px 2px #000; }
.win.mapfull .ptitle .x { pointer-events: auto; min-width: 46px; min-height: 42px; font-size: 28px; color: var(--parch); }
.win.mapfull .pbody { position: absolute; inset: 0; padding: 0; max-height: none; overflow: hidden; }
.win.mapfull canvas { position: absolute; left: 0; top: 0; touch-action: none; }
.win.mapfull .mapbar { position: absolute; right: calc(10px + env(safe-area-inset-right)); bottom: 12px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.win.mapfull .mapbar .btn { width: 46px; height: 42px; padding: 0; font-size: 20px; border-radius: 21px; background: rgba(28,20,12,.9); }
.win.mapfull .mapbar .zl { color: var(--parch); font-weight: bold; text-shadow: 0 1px 2px #000; }
.win.mapfull .maphint { position: absolute; left: calc(12px + env(safe-area-inset-left)); bottom: 10px; z-index: 2; max-width: calc(100% - 90px); color: var(--parch2); font-size: 11px; text-shadow: 0 1px 2px #000; pointer-events: none; }

.craftsec { margin: 8px 0 4px; padding: 3px 6px; color: #e2c27a; font-weight: bold; cursor: pointer; border-bottom: 1px solid rgba(226,194,122,.3); user-select: none; }
.craftsec::before { content: '▾ '; }
.craftsec.shut::before { content: '▸ '; }
.shoprow.locked { cursor: not-allowed; opacity: .55; }
.shoprow.locked .slot { filter: grayscale(1) brightness(.75); }
.shoprow.locked .nm { color: #9a9488; }
.shoprow.locked:hover { opacity: .85; }
.craftpath { margin: 12px 0 2px; padding: 5px 8px; background: rgba(0,0,0,.25); border-left: 3px solid #e2c27a; color: #d8ccb0; font-size: 12px; }

.packtabs { gap: 4px; margin-bottom: 6px; }
.packtab.on { background: #6a5226; color: #ffe9a0; border-color: #c9a74a; }

/* ---- the Deeds Book (client/js/deeds.mjs) ---- */
.dk-head { display: flex; align-items: center; gap: 14px; padding: 0 2px 8px; margin-bottom: 6px; border-bottom: 1px solid #3a2b1d; }
.dk-score { font-family: var(--title-font); text-align: center; white-space: nowrap; }
.dk-score b { display: block; font-size: 28px; line-height: 1; font-weight: normal; color: #ffe08a; text-shadow: 0 0 12px rgba(255,200,90,.35), 0 2px 3px #000; }
.dk-headbar { flex: 1; min-width: 0; }
.dk-cur { text-align: right; max-width: 230px; }
.dk-curt { font-family: var(--title-font); color: var(--parch); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-sub { color: var(--parch2); font-size: 11px; }
.dk-bar { position: relative; height: 6px; margin: 3px 0; background: #120d09; border: 1px solid #3a2b1d; border-radius: 4px; overflow: hidden; }
.dk-bar.big { height: 10px; }
.dk-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #7a5a22, #e2c27a); box-shadow: 0 0 6px rgba(226,194,122,.5); }
.dk-prog { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--parch2); }
.dk-prog .dk-bar { flex: 1; }
.dk-scroll { max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.dk-grp { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.dk-grpn { font-family: var(--ui-font); font-size: 11px; color: var(--parch2); }
.dk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.dk-stack { display: flex; flex-direction: column; gap: 5px; }
.dk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.dk-deed { display: flex; gap: 8px; align-items: flex-start; padding: 5px 7px; background: rgba(0,0,0,.28); border: 1px solid #33261a; border-radius: 3px; }
.dk-deed.done { border-color: #806428; background: linear-gradient(180deg, rgba(92,68,26,.38), rgba(30,22,12,.4)); }
.dk-seal { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px dashed #4a3a28; color: #6d5d48; font-size: 14px; }
.dk-deed.done .dk-seal { color: #3a2508; border: 1px solid #ffe08a; background-image: radial-gradient(circle at 35% 30%, #ffeaa8, #c9962f 60%, #7a5418); box-shadow: 0 0 8px rgba(255,210,110,.45); }
.dk-seal.img, .dk-deed.done .dk-seal.img { border-radius: 4px; background-size: cover; background-position: center; image-rendering: pixelated; }
.dk-seal.img { filter: grayscale(1) brightness(.5); }
.dk-deed.done .dk-seal.img { filter: none; }
.dk-main { flex: 1; min-width: 0; }
.dk-n { color: var(--parch); font-size: 13px; }
.dk-deed.done .dk-n { color: #ffe08a; }
.dk-d { color: var(--parch2); font-size: 11px; }
.dk-ti { color: #9fd0ff; font-size: 11px; }
.dk-when { color: #8f7d5c; font-size: 10px; }
.dk-pts { flex: none; min-width: 28px; padding: 1px 3px; text-align: center; font-family: var(--title-font); font-size: 12px; color: #a08a5a; border: 1px solid #4a3a28; border-radius: 3px; }
.dk-deed.done .dk-pts { color: #ffe08a; border-color: #806428; }
.dk-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dk-cat { padding: 6px 8px; background: rgba(0,0,0,.28); border: 1px solid #3a2b1d; border-radius: 3px; cursor: pointer; }
.dk-cat:hover { border-color: var(--brassd); background: rgba(60,44,22,.4); }
.dk-catn { font-family: var(--title-font); color: var(--brass2); font-size: 14px; }
.dk-list { margin-top: 4px; }
.dk-stars { color: #ffd76a; letter-spacing: 1px; font-size: 11px; white-space: nowrap; }
.dk-stars i { color: #4a3d2c; font-style: normal; }
.bestiary .be.mastered { border-color: #a07c30; box-shadow: inset 0 0 14px rgba(255,200,90,.14); }
.dk-chips { display: flex; flex-wrap: wrap; gap: 3px; margin: 5px 0 2px; }
.dk-chip { padding: 1px 7px; border-radius: 9px; background: #1a130d; border: 1px solid #3a2b1d; color: var(--parch2); font-size: 11px; cursor: pointer; }
.dk-chip.on, .dk-chip:hover { color: var(--brass2); border-color: var(--brassd); }
.dk-titles { display: flex; flex-wrap: wrap; gap: 4px; }
.dk-title { padding: 3px 9px; border-radius: 3px; background: #1a130d; border: 1px solid #4a3a28; color: var(--parch); font-family: var(--title-font); font-size: 13px; cursor: pointer; }
.dk-title:hover { border-color: var(--brass2); }
.dk-title.skill { font-style: italic; }
.dk-title.on { color: #2a1c08; background: linear-gradient(#ffe08a, #c9962f); border-color: #ffe08a; }
.dk-lock { display: flex; gap: 10px; align-items: baseline; padding: 2px 4px; font-size: 12px; color: #8f7d5c; }
.dk-lock b { min-width: 160px; font-family: var(--title-font); font-weight: normal; color: #b9a888; }
.dk-lock .dk-ln { flex: 1; }
.dk-lock .dk-lp { color: var(--parch2); font-size: 11px; white-space: nowrap; }
/* the banner when a deed is earned (above the hotbar, clear of the target frame) */
.deedbanner { position: absolute; left: 50%; bottom: 240px; transform: translateX(-50%); min-width: 340px; max-width: 540px; padding: 10px 30px 11px; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, rgba(44,31,16,.95), rgba(18,13,9,.95)); border: 1px solid #a07c30; border-radius: 4px;
  box-shadow: 0 0 0 1px #000, 0 8px 28px rgba(0,0,0,.6), 0 0 24px rgba(255,200,90,.22); animation: deedin .5s cubic-bezier(.2,1.4,.4,1) both; }
.deedbanner.out { animation: deedout .45s ease-in forwards; }
.deedbanner.big { border-color: #ffe08a; box-shadow: 0 0 0 1px #000, 0 8px 28px rgba(0,0,0,.6), 0 0 34px rgba(255,210,110,.4); }
.deedbanner::before, .deedbanner::after { content: '❖'; position: absolute; top: 50%; transform: translateY(-50%); color: #a07c30; font-size: 14px; }
.deedbanner::before { left: 10px; } .deedbanner::after { right: 10px; }
.deedbanner .db-k { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #c9a74a; }
.deedbanner .db-n { font-family: var(--title-font); font-size: 22px; color: #ffe08a; text-shadow: 0 0 12px rgba(255,200,90,.45), 0 2px 3px #000; }
.deedbanner.big .db-n { font-size: 26px; }
.deedbanner .db-d { font-size: 12px; color: var(--parch); }
.deedbanner .db-x { margin-top: 2px; font-size: 11px; color: #9fd0ff; }
.deedbanner .shine { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; pointer-events: none; }
.deedbanner .shine::after { content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,235,170,.3), transparent); animation: deedshine 1.1s .35s ease-out both; }
@keyframes deedin { 0% { opacity: 0; transform: translate(-50%, 18px) scale(.92); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes deedout { to { opacity: 0; transform: translate(-50%, -14px); } }
@keyframes deedshine { to { left: 120%; } }
.toast.bstar { font-size: 16px; color: #f3e2b0; }
#hud:has(.tipcard) .deedbanner { bottom: 300px; }   /* a tip card is up: stand clear of it */
.dk-find { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.dk-find input { flex: 1; width: auto; min-width: 0; }
.toast.bstar.big { font-size: 22px; color: #ffe08a; }

/* ---- the Splintered Star (client/js/story.mjs) ---- */
.deedbanner.story { border-color: #8a6ad0; background: linear-gradient(180deg, rgba(34,24,54,.95), rgba(12,9,22,.95)); box-shadow: 0 0 0 1px #000, 0 8px 28px rgba(0,0,0,.6), 0 0 26px rgba(160,120,255,.25); }
.deedbanner.story .db-k { color: #b8a0e8; }
.deedbanner.story .db-n { color: #f0e4ff; text-shadow: 0 0 14px rgba(190,150,255,.5), 0 2px 3px #000; }
.deedbanner.story::before, .deedbanner.story::after { content: '✦'; color: #8a6ad0; }
.deedbanner.story.done { border-color: #c9a74a; }
.st-block { margin: 0 0 8px; padding: 6px 8px; border: 1px solid #5a4a7a; border-left: 3px solid #a888e8; border-radius: 3px; background: linear-gradient(180deg, rgba(40,28,60,.55), rgba(16,12,24,.55)); cursor: pointer; }
.st-block:hover { border-color: #8a6ad0; }
.st-block .st-k { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #b8a0e8; }
.st-block .st-name { font-family: var(--title-font); font-size: 15px; color: #f0e4ff; }
.st-block .st-line { font-size: 11px; color: var(--parch2); margin: 1px 0 3px; }
.quest.story .qn { color: #e2d0ff; }
.st-intro { font-size: 12px; color: var(--parch); font-style: italic; margin-bottom: 6px; }
.st-scroll { max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.st-act { margin: 6px 0; padding: 5px 7px; border: 1px solid #33261a; border-radius: 3px; background: rgba(0,0,0,.25); }
.st-act.here { border-color: #8a6ad0; box-shadow: inset 0 0 14px rgba(160,120,255,.12); }
.st-act.done { border-color: #806428; }
.st-acth { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.st-actn { font-family: var(--title-font); font-size: 14px; color: var(--brass2); }
.st-act.done .st-actn { color: #ffe08a; }
.st-land { font-size: 11px; color: var(--parch2); }
.st-ch { display: flex; align-items: center; gap: 7px; padding: 2px 4px; border-radius: 2px; cursor: pointer; font-size: 12px; color: #7a6d5a; }
.st-ch:hover { background: rgba(184,146,74,.15); }
.st-ch .st-mk { width: 12px; text-align: center; }
.st-ch .st-n { flex: 1; }
.st-ch .st-lv { font-size: 10px; color: #7a6d5a; }
.st-ch.s4 { color: #c9b07a; } .st-ch.s4 .st-mk { color: #ffe08a; }
.st-ch.s3 { color: #f0e4ff; } .st-ch.s3 .st-mk { color: #c8a8ff; }
.st-ch.s2 { color: var(--parch); } .st-ch.s2 .st-mk { color: #a888e8; }
.st-ch.cur { background: rgba(140,100,220,.16); }

/* ---- the quest tracker: a header, pins; the journal's Track buttons ---- */
#qtrack .qthead { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 1px 2px; }
#qtrack .qtt { color: var(--parch2); font-size: 11px; cursor: pointer; text-shadow: 0 1px 2px #000; }
#qtrack .qtt:hover { color: var(--brass2); }
#qtrack .qtpick { background: rgba(14,10,7,.72); border: 1px solid var(--brassd); color: var(--brass2); font-size: 10px; padding: 0 6px; border-radius: 2px; cursor: pointer; }
#qtrack .qt.pinned { border-left-color: #e8d090; }
.quest .qtrackbtn { float: right; margin: 0 0 2px 6px; background: #1a130d; border: 1px solid #4a3a28; color: var(--parch2); font-size: 10px; padding: 1px 6px; border-radius: 2px; cursor: pointer; }
.quest .qtrackbtn:hover { border-color: var(--brass); color: var(--parch); }
.quest .qtrackbtn.on { color: #8fe07a; border-color: #4a6a3a; }

/* ---- touch controls (client/js/touch.mjs): body.touch on a phone or a tablet ---- */
#tstick, #tacts, #ttop, #tcancel, #torient { display: none; }
body.touch { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.touch canvas#view { touch-action: none; }
body.touch #tstick, body.touch #tacts, body.touch #ttop { display: block; }
body.touch #tcancel:not(.hidden), body.touch #torient:not(.hidden) { display: flex; }
#tstick { position: absolute; left: calc(14px + env(safe-area-inset-left)); bottom: 14px; width: 150px; height: 150px; touch-action: none; }
#tstick .tbase { position: absolute; left: 15px; top: 15px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(rgba(40,30,20,.35), rgba(14,10,7,.55)); border: 2px solid rgba(201,167,74,.55); box-shadow: inset 0 0 18px rgba(0,0,0,.5); }
#tstick .tknob { position: absolute; left: 50px; top: 50px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f0dca0, #a07c30 70%, #5a4018); border: 1px solid #ffe08a; box-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events: none; }
#tstick.on .tbase { border-color: #ffe08a; }
.tb { display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(201,167,74,.7); background: radial-gradient(circle at 40% 35%, rgba(70,52,30,.92), rgba(20,14,9,.92)); color: #f0e0b0; font-size: 22px; line-height: 1; padding: 0; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.55); touch-action: none; user-select: none; -webkit-user-select: none; }
.tb.down { transform: scale(.92); border-color: #ffe08a; background: radial-gradient(circle at 40% 35%, rgba(120,90,40,.95), rgba(40,28,14,.95)); }
#tacts { position: absolute; right: calc(14px + env(safe-area-inset-right)); bottom: 14px; width: 190px; height: 170px; }
#tacts .tb { position: absolute; width: 56px; height: 56px; }
#tacts .tb.big { width: 82px; height: 82px; right: 4px; bottom: 4px; font-size: 34px; border-width: 3px; }
#tacts [data-a="target"] { right: 90px; bottom: 4px; }
#tacts [data-a="use"] { right: 82px; bottom: 74px; }
#tacts [data-a="dash"] { right: 14px; bottom: 98px; font-size: 26px; }
/* left-handed (Options → Touch layout): the stick bottom right, the buttons bottom left, mirrored so ⚔ keeps the corner */
body.touch.lefty #tstick { left: auto; right: calc(14px + env(safe-area-inset-right)); }
body.touch.lefty #tacts { right: auto; left: calc(14px + env(safe-area-inset-left)); }
body.touch.lefty #tacts .tb.big { right: auto; left: 4px; }
body.touch.lefty #tacts [data-a="target"] { right: auto; left: 90px; }
body.touch.lefty #tacts [data-a="use"] { right: auto; left: 82px; }
body.touch.lefty #tacts [data-a="dash"] { right: auto; left: 14px; }
/* the first-time question: which thumb walks? */
#thand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 55; width: min(520px, calc(100vw - 24px)); padding: 14px 16px; background: rgba(14,10,7,.96); border: 1px solid var(--brassd); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.75); text-align: center; }
#thand .thq { font: 18px var(--title-font); color: var(--brass2); margin-bottom: 12px; }
#thand .throw { display: flex; gap: 12px; justify-content: center; }
#thand .thandb { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px; background: linear-gradient(#4a3826, #2c2015); border: 1px solid var(--brassd); border-radius: 6px; color: var(--parch); font-size: 13px; line-height: 1.3; cursor: pointer; }
#thand .thandb:active { border-color: #ffe08a; }
#thand .thpic { position: relative; width: 118px; height: 58px; border: 2px solid #8a7450; border-radius: 10px; background: linear-gradient(#2d3d22, #1f2b17); }
#thand .thpic i { position: absolute; bottom: 6px; font-style: normal; border-radius: 50%; }
#thand .thpic .st { width: 22px; height: 22px; background: radial-gradient(circle at 40% 35%, #f0dca0, #a07c30 70%, #5a4018); box-shadow: 0 0 0 4px rgba(201,167,74,.3); }
#thand .thpic .ac { width: 26px; height: 26px; border: 2px solid #c9a74a; background: #2c2015; color: #f0e0b0; font: 14px/22px sans-serif; text-align: center; bottom: 4px; }
#thand .thpic.right .st { left: 10px; } #thand .thpic.right .ac { right: 8px; }
#thand .thpic.left .st { right: 10px; } #thand .thpic.left .ac { left: 8px; }
#thand .thn { margin-top: 10px; font-size: 11px; color: var(--parch2); }
#ttop { position: absolute; right: calc(8px + env(safe-area-inset-right)); top: 8px; }
#ttop .tb { width: 44px; height: 44px; font-size: 20px; margin-bottom: 6px; position: relative; }
#ttop .tb.zoomb { font: bold 15px var(--ui-font); }   /* the zoom: ½× ⅔× 1× … */
#tzoom { position: absolute; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: calc(100vw - 70px); padding: 4px; background: rgba(14,10,7,.84); border: 1px solid var(--brassd); border-radius: 24px; z-index: 30; box-shadow: 0 4px 14px rgba(0,0,0,.6); }
#tzoom .tb { width: 40px; height: 40px; font: bold 14px var(--ui-font); }
#tzoom .tb.on { border-color: #ffe08a; color: #ffe08a; }
#ttop .tb[data-n]:not([data-n=""])::after { content: attr(data-n); position: absolute; right: -4px; top: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #c8322b; color: #fff; font: bold 10px/16px var(--ui-font); }
#tcancel { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); width: auto; height: 40px; padding: 0 16px; border-radius: 20px; font-size: 15px; }
#torient { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); align-items: center; gap: 8px; padding: 8px 12px; background: rgba(14,10,7,.88); border: 1px solid var(--brassd); border-radius: 4px; color: var(--parch); font-size: 13px; }
#torient .tb { width: 30px; height: 30px; font-size: 14px; }
/* the phone layout: the HUD frames where thumbs aren't */
body.touch .hudgrip { display: none; }
body.touch #vitals { left: calc(6px + env(safe-area-inset-left)); top: 6px; width: 230px; padding: 4px; }
body.touch #portrait { width: 40px; height: 40px; }
body.touch #minimap-wrap { right: calc(60px + env(safe-area-inset-right)); top: 6px; width: 112px; padding: 3px; }
body.touch #minimap { width: 104px; height: 104px; }
body.touch #mm-info, body.touch #mm-coords { display: none; }
body.touch #targetframe { top: 6px; width: 220px; }
body.touch #qtrack { left: calc(6px + env(safe-area-inset-left)); right: auto; top: 84px; width: 210px; }
body.touch #qtrack .qts { font-size: 10px; }
body.touch #partyframe { top: 84px; left: auto; right: calc(60px + env(safe-area-inset-right)); top: 128px; }
body.touch #hotbar { left: 50%; right: auto; bottom: 6px; transform: translateX(-50%); padding: 3px; }
body.touch #hotbar .hotrow.hidden, body.touch #hotbar > .hotrow:first-child { display: none; }
body.touch #hotbar .slot { width: 38px; height: 38px; background-size: 32px; }
body.touch #hotbar .hottog { height: 38px; }
body.touch #actbar { left: 50%; right: auto; bottom: 58px; transform: translateX(-50%); }
body.touch #chat { display: none; }
body.touch.chatopen #chat { display: flex; left: calc(6px + env(safe-area-inset-left)); top: 84px; bottom: auto; width: min(460px, calc(100vw - 80px)); height: 46vh; z-index: 40; }
body.touch #menubtns { display: none; }
body.touch.menuopen #menubtns { display: grid; position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); grid-template-columns: repeat(4, 76px); gap: 8px; padding: 12px; background: rgba(14,10,7,.94); border: 1px solid var(--brassd); border-radius: 6px; z-index: 50; box-shadow: 0 10px 40px rgba(0,0,0,.7); }
body.touch.menuopen #menubtns button { height: 46px; font-size: 13px; }
body.touch .dockpanel:not(.floating) { top: 6px; bottom: 6px; right: calc(6px + env(safe-area-inset-right)); width: min(340px, calc(100vw - 12px)); z-index: 45; }
body.touch .ptitle .x, body.touch .ptitle button { min-width: 34px; min-height: 30px; font-size: 20px; }
body.touch .win { overflow-y: auto; z-index: 46; }
body.touch #toasts { top: 30%; }
body.touch .deedbanner { bottom: 170px; min-width: 0; max-width: calc(100vw - 260px); }
body.touch .tipcard { bottom: auto; top: 64px; width: min(420px, calc(100vw - 24px)); }
body.touch #ctxmenu > * { min-height: 34px; line-height: 34px; }
@media (orientation: portrait) {
  body.touch #hotbar { bottom: 172px; }
  body.touch #hotbar .slot { width: 32px; height: 32px; background-size: 26px; }
  body.touch #hotbar .hottog { height: 32px; }
  body.touch #hotbar .hotrow { gap: 2px; }
  body.touch #vitals { width: 196px; }
  body.touch #minimap-wrap { width: 94px; }
  body.touch #minimap { width: 86px; height: 86px; }
  body.touch #actbar { bottom: 222px; }
  body.touch .deedbanner { bottom: 230px; max-width: calc(100vw - 24px); }
  body.touch #qtrack { top: 128px; }
}
/* compact tracker rows on a phone; a short (sideways) screen gets a smaller stick and hotbar so nothing overlaps */
body.touch #qtrack .qt { padding: 2px 6px; }
body.touch #qtrack .qtn { font-size: 12px; }
body.touch #qtrack .qts, body.touch #qtrack .qtd { font-size: 10px; line-height: 13px; }
body.touch #qtrack .qt.sk .qts { display: none; }   /* a phone: name, value, gain and the bar */
body.touch #qtrack .qt.sk .skn { font-size: 12px; }
body.touch .skill .trackbtn { padding: 5px 7px; }
body.touch #hotbar .hotside .hottog:not(.autotog) { display: none; }
@media (max-height: 430px) {
  body.touch #ttop .tb { width: 40px; height: 40px; margin-bottom: 4px; font-size: 18px; }   /* four of them above the action buttons */
  body.touch #ttop .tb.zoomb { font-size: 13px; }
  body.touch #tstick { width: 128px; height: 128px; bottom: 8px; }
  body.touch #tstick .tbase { left: 10px; top: 10px; width: 108px; height: 108px; }
  body.touch #tstick .tknob { left: 41px; top: 41px; width: 46px; height: 46px; }
  body.touch #hotbar .slot { width: 34px; height: 34px; background-size: 28px; }
  body.touch #hotbar .hottog { height: 34px; }
  body.touch #hotbar .hotrow { gap: 3px; }
  body.touch #tacts { bottom: 8px; }
}

/* ---- item comparison in tooltips (ui.mjs compareParts) ---- */
#tooltip.cmp { max-width: 600px; }
#tooltip .ttcmp { display: flex; gap: 10px; align-items: flex-start; }
#tooltip .ttmain { flex: 1 1 280px; min-width: 0; max-width: 300px; }
#tooltip .tteq { flex: 0 1 260px; min-width: 0; max-width: 270px; padding-left: 10px; border-left: 1px solid #4a3a28; opacity: .92; }
#tooltip .tt-eh { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--parch2); margin-bottom: 2px; }
#tooltip .tt-sep { height: 1px; background: #3a2b1d; margin: 6px 0; }
#tooltip .tt-ch { margin-top: 6px; padding-top: 4px; border-top: 1px solid #4a3a28; color: var(--brass2); font-size: 11px; }
#tooltip .tt-c.up { color: #8fe07a; } #tooltip .tt-c.dn { color: #ff7a6a; }
#tooltip .tt-cf { color: var(--parch2); font-size: 11px; }
#tooltip .tt-cw { color: #ffc65c; font-size: 11px; }
#tooltip .tt-sp { color: #ffd98a; margin-top: 4px; }   /* a spell's or technique's numbers (spellcalc.mjs) */
#tooltip .tt-sp b, #tooltip .tt-cf b { color: #fff; }
#tooltip.tight { font-size: 11px; line-height: 1.25; padding: 4px 7px; overflow: hidden; }
#tooltip.tight .tt-n { font-size: 13px; }
#tooltip.tight .ttcmp .tt-d { display: none; }   /* the flavour text: the comparison matters more */
@media (max-width: 640px) {
  #tooltip.cmp { max-width: calc(100vw - 16px); }
  #tooltip .ttcmp { flex-direction: column; gap: 6px; }
  #tooltip .ttmain, #tooltip .tteq { flex: none; max-width: none; }   /* stacked: the column widths must not become heights */
  #tooltip .tteq { padding: 6px 0 0; border-left: 0; border-top: 1px solid #4a3a28; }
}