:root {
  --ink: #ece3cf;
  --dim: #a89c84;
  --gold: #e8b93a;
  --gold2: #b07c1a;
  --wood: #2a1e14;
  --wood2: #3a2a1c;
  --edge: #6a4e2c;
  --red: #c8423a;
  --green: #7fb04a;
  --head: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0d12; color: var(--ink); font: 14px/1.4 var(--body); user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
button, input, select { font: inherit; color: inherit; }
button { background: linear-gradient(#4a3520, #33241a); border: 1px solid var(--edge); border-radius: 4px; padding: 6px 12px; cursor: pointer; }
button:hover { border-color: var(--gold); color: #fff; }
button:disabled { opacity: 0.45; cursor: default; border-color: var(--edge); color: var(--dim); }
button.big { display: block; width: 100%; padding: 10px 14px; margin: 8px 0; font: 16px var(--head); letter-spacing: 0.06em; }
button.gold { background: linear-gradient(#d9a52e, #9a6a14); border-color: #f0cc6a; color: #1c1408; font-weight: 700; }
button.gold:hover { color: #000; filter: brightness(1.1); }
button.link { background: none; border: none; color: var(--dim); text-decoration: underline; padding: 4px; }
button.link:hover { color: var(--red); }
input[type=text], input[type=number], input:not([type]), select { background: #17110b; border: 1px solid var(--edge); border-radius: 4px; padding: 8px 10px; width: 100%; margin: 6px 0; user-select: text; -webkit-user-select: text; }
input:focus, select:focus { outline: 1px solid var(--gold); }
h1, h2, h3 { font-family: var(--head); font-weight: 700; margin: 0 0 8px; letter-spacing: 0.05em; }
h2 { font-size: 20px; color: var(--gold); }
h3 { font-size: 15px; color: var(--ink); }
.small { font-size: 12px; color: var(--dim); }
.dim { color: var(--dim); font: 13px var(--body); letter-spacing: 0; }
.err { color: #ff8a7a; }

/* ---------------------------------------------------------------- the world's overlay */
#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.7); }
#hotbar { position: absolute; left: 14px; top: 14px; display: flex; gap: 4px; }
.slot { position: relative; width: 52px; height: 52px; background: rgba(24, 17, 11, 0.72); border: 1px solid #54402a; border-radius: 4px; background-repeat: no-repeat; background-position: center; background-size: 42px; }
.slot.eq { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold2), 0 0 8px rgba(232, 185, 58, 0.35); background-color: rgba(58, 42, 20, 0.85); }
.slot .n { position: absolute; right: 3px; bottom: 1px; font-size: 12px; font-weight: 700; }
.slot .k { position: absolute; left: 4px; top: 1px; font-size: 10px; color: var(--dim); }
.slot.arrow { border-color: #7fb8d8; }
#topright { position: absolute; right: 14px; top: 14px; width: 180px; text-align: right; }
#mapbox { position: relative; width: 176px; height: 176px; margin-left: auto; border-radius: 50%; overflow: hidden; border: 2px solid #6a4e2c; box-shadow: 0 0 0 2px #1c140e, 0 4px 14px rgba(0, 0, 0, 0.6); background: #10151a; }
#mini { display: block; width: 176px; height: 176px; }
#north { position: absolute; left: 50%; top: 3px; transform: translateX(-50%); font: 700 11px var(--head); color: var(--gold); }
#place { font: 700 15px var(--head); letter-spacing: 0.08em; margin-top: 6px; }
#clock { font-size: 12px; color: var(--dim); }
#purse { margin-top: 4px; font-size: 15px; }
.coin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe89a, #d9a52e 60%, #8a5e10); border: 1px solid #5a3e0a; margin-right: 5px; vertical-align: -1px; }
#buffs { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.buff { background: rgba(24, 17, 11, 0.7); border: 1px solid #54402a; border-radius: 10px; padding: 1px 9px; font-size: 12px; }
.buff.good { border-color: #5a8a3a; color: #c8f0a0; }
.buff.bad { border-color: #9a3a2a; color: #ffb0a0; }
.buff.boon { border-color: var(--gold); color: var(--gold); }
#vitals { position: absolute; left: 14px; bottom: 16px; width: 260px; }
#foods { display: flex; gap: 4px; margin-bottom: 6px; min-height: 40px; }
.food { position: relative; width: 40px; height: 40px; background: rgba(24, 17, 11, 0.72) center / 32px no-repeat; border: 1px solid #54402a; border-radius: 50%; }
.food.low { border-color: var(--red); animation: pulse 1s infinite; }
.food b { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font-size: 10px; }
.bar { position: relative; height: 18px; background: rgba(12, 9, 6, 0.75); border: 1px solid #54402a; border-radius: 3px; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; }
.bar span { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 17px; font-weight: 700; }
.bar.hp i { background: linear-gradient(#e0564a, #9a2a22); }
.bar.st { position: absolute; left: 50%; bottom: 20px; width: 300px; height: 10px; transform: translateX(-50%); transition: opacity 0.4s; }
.bar.st i { background: linear-gradient(#f0d04a, #b88a1a); }
.bar.st.tired { border-color: #ff5a4a; box-shadow: 0 0 10px #ff5a4a; }
#cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#cross i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
#drawmeter { position: absolute; left: 50%; top: calc(50% + 22px); width: 70px; height: 5px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); border-radius: 3px; overflow: hidden; }
#drawmeter i { display: block; height: 100%; background: var(--gold); transform-origin: left; }
#hover { position: absolute; left: 50%; top: calc(50% + 46px); transform: translateX(-50%); text-align: center; max-width: 420px; }
#hover .t { font: 700 16px var(--head); letter-spacing: 0.04em; }
#hover .a { color: #f4e4b0; }
#hover .a b { display: inline-block; min-width: 20px; padding: 0 5px; margin-right: 5px; border: 1px solid #b89a5a; border-radius: 3px; background: rgba(24, 17, 11, 0.8); color: var(--gold); font-size: 12px; }
#hover .d { color: var(--dim); font-size: 12px; }
#buildhint { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); text-align: center; background: rgba(24, 17, 11, 0.6); border: 1px solid #54402a; border-radius: 4px; padding: 5px 12px; }
#buildhint .bad { color: #ff9a8a; }
#toast { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); text-align: center; font: 700 30px var(--head); letter-spacing: 0.12em; color: #f6e8c0; opacity: 0; transition: opacity 0.8s; max-width: 80vw; }
#toast.on { opacity: 1; }
#toast small { display: block; font: italic 15px var(--head); letter-spacing: 0.03em; color: var(--dim); margin-top: 4px; }
#log { position: absolute; left: 14px; top: 84px; width: 360px; display: flex; flex-direction: column; gap: 2px; }
#log div { background: rgba(12, 9, 6, 0.5); padding: 2px 8px; border-left: 2px solid var(--gold2); border-radius: 0 3px 3px 0; animation: fadeout 6s forwards; }
#chatlog { position: absolute; left: 14px; bottom: 96px; width: 380px; display: flex; flex-direction: column; gap: 2px; }
#chatlog div { background: rgba(12, 9, 6, 0.5); padding: 2px 8px; border-radius: 3px; animation: fadeout 16s forwards; overflow-wrap: anywhere; }
#chatlog div b { color: var(--gold); margin-right: 5px; }
#chatlog div.note { color: var(--dim); font-style: italic; }
#chat { position: absolute; left: 14px; bottom: 60px; width: 380px; pointer-events: auto; }
#chat input { margin: 0; background: rgba(18, 13, 9, 0.9); }
.plate.keeper { color: #bfe8ff; font-weight: 700; }
.plate.keeper.pvp { color: #ff9c8c; }
.plate.keeper.pvp i b { background: #e0604a; }
.plate.keeper.away { opacity: 0.55; font-style: italic; }
.warn { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.62); }
.warn[hidden] { display: none; }
.warnbox { width: min(420px, 92vw); padding: 18px 20px; background: linear-gradient(rgba(52, 30, 20, 0.98), rgba(30, 18, 12, 0.98)); border: 1px solid #9a3a2a; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); }
.warnbox h2 { color: #ffb0a0; }
.plate.keeper i b { background: #5fb0e0; }
#feed { position: absolute; right: 14px; bottom: 60px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#feed div { background: rgba(12, 9, 6, 0.55) left 4px center / 22px no-repeat; padding: 2px 9px 2px 30px; border-radius: 3px; animation: fadeout 4s forwards; }
#feed div.sk { padding-left: 9px; color: var(--gold); }
#raven { position: absolute; right: 14px; bottom: 150px; width: 300px; background: rgba(18, 13, 9, 0.82); border: 1px solid var(--edge); border-left: 3px solid var(--gold); border-radius: 4px; padding: 8px 12px; }
#raven .who { font: italic 12px var(--head); color: var(--gold); }
#boss { position: absolute; left: 50%; top: 56px; width: min(560px, 60vw); transform: translateX(-50%); text-align: center; }
#bossname { font: 700 20px var(--head); letter-spacing: 0.1em; color: #f6e0b0; margin-bottom: 3px; }
.bossbar { height: 12px; border-color: #8a2a22; }
.bossbar i { background: linear-gradient(#e0423a, #7a1814); }
#labels { position: absolute; inset: 0; overflow: hidden; }
.num { position: absolute; font: 700 17px var(--head); transform: translate(-50%, -50%); will-change: transform, opacity; }
.num.hit { color: #fff; } .num.weak { color: #ffe04a; font-size: 21px; } .num.dull { color: #9aa0a8; font-size: 14px; } .num.crit { color: #ff8a3a; font-size: 23px; } .num.hurt { color: #ff5a4a; }
.plate { position: absolute; transform: translate(-50%, -100%); text-align: center; font-size: 12px; white-space: nowrap; }
.plate i { display: block; width: 56px; height: 5px; margin: 1px auto 0; background: rgba(0, 0, 0, 0.7); border-radius: 2px; overflow: hidden; }
.plate i b { display: block; height: 100%; background: #d8483a; }
.plate .star { color: var(--gold); }
@keyframes fadeout { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pulse { 50% { opacity: 0.45; } }

/* ---------------------------------------------------------------- panels */
.panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 94vw); max-height: 92vh; overflow: auto; padding: 18px 20px; background: linear-gradient(rgba(42, 30, 20, 0.97), rgba(26, 18, 12, 0.97)); border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 0 0 1px #120c08, 0 0 0 4px rgba(106, 78, 44, 0.25), 0 20px 60px rgba(0, 0, 0, 0.7); z-index: 20; }
.panel.wide { width: min(940px, 96vw); }
.panel.narrow { width: min(400px, 94vw); }
.panel.map { width: auto; padding: 12px; }
.cols { display: flex; gap: 20px; }
.col { flex: 1; min-width: 0; }
.grid { display: grid; gap: 4px; }
.g8 { grid-template-columns: repeat(8, 52px); }
.g4 { grid-template-columns: repeat(4, 52px); }
.grid .slot { cursor: pointer; }
.grid .slot:hover { border-color: var(--gold); }
.grid .slot.drag { opacity: 0.4; }
.grid .slot.over { box-shadow: inset 0 0 0 2px var(--gold); }
.tip { min-height: 74px; margin-top: 10px; padding: 8px 10px; background: rgba(12, 9, 6, 0.55); border: 1px solid #3c2c1c; border-radius: 4px; }
.tip b { font: 700 15px var(--head); color: var(--gold); }
.tip .stats { color: #c8dca8; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tabs button { flex: 1; }
.tabs button.on { background: linear-gradient(#6a4e2c, #4a3520); border-color: var(--gold); color: #fff; }
.list { max-height: 250px; overflow: auto; border: 1px solid #3c2c1c; border-radius: 4px; background: rgba(12, 9, 6, 0.45); }
.item { display: flex; align-items: center; gap: 8px; padding: 3px 8px; cursor: pointer; border-bottom: 1px solid rgba(60, 44, 28, 0.6); }
.item:hover, .item.on { background: rgba(106, 78, 44, 0.35); }
.item.no { color: #8a7e6a; }
.item .ic { width: 28px; height: 28px; flex: none; background: center / contain no-repeat; }
.item .tag { margin-left: auto; font-size: 11px; color: var(--dim); }
.item button { margin-left: auto; padding: 2px 10px; }
.detail { margin-top: 10px; min-height: 120px; }
.detail .costs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cost { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; background: rgba(12, 9, 6, 0.55); border: 1px solid #3c2c1c; border-radius: 12px; font-size: 12px; }
.cost.lack { border-color: #9a3a2a; color: #ffb0a0; }
.cost .ic { width: 20px; height: 20px; background: center / contain no-repeat; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.card { padding: 8px 6px; text-align: center; background: rgba(12, 9, 6, 0.5); border: 1px solid #3c2c1c; border-radius: 4px; cursor: pointer; }
.card:hover, .card.on { border-color: var(--gold); background: rgba(106, 78, 44, 0.3); }
.card.no { opacity: 0.55; }
.card .ic { width: 48px; height: 48px; margin: 0 auto 4px; background: center / contain no-repeat; }
.card .c { font-size: 11px; color: var(--dim); }
.skill { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.skill span { width: 110px; }
.skill b { width: 26px; text-align: right; color: var(--gold); }
.skill i { flex: 1; height: 7px; background: rgba(12, 9, 6, 0.7); border-radius: 3px; overflow: hidden; }
.skill i u { display: block; height: 100%; background: linear-gradient(#e8b93a, #a8781a); }
.goal { padding: 4px 0 4px 22px; position: relative; }
.goal::before { content: ""; position: absolute; left: 3px; top: 9px; width: 9px; height: 9px; border: 1px solid var(--gold2); transform: rotate(45deg); }
.goal.done { color: var(--dim); text-decoration: line-through; }
.goal.done::before { background: var(--gold); }
.lead { font: italic 15px var(--head); color: #d8ccb0; margin: 0 0 10px; }
.note { padding: 8px 10px; margin: 8px 0; background: rgba(12, 9, 6, 0.55); border: 1px solid #54402a; border-radius: 4px; }
.note.warn { border-color: #b08a2a; color: #f0d890; }
.row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.row input { width: 150px; margin: 0; }
.row b { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.stats > div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(60, 44, 28, 0.6); }
.stats span { color: var(--dim); }
.msg { min-height: 20px; color: #f0d890; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0; }
.setting input[type=range] { width: 180px; }
.setting select { width: 180px; margin: 0; }
.keys { margin: 12px 0; line-height: 1.9; }
.keys b { padding: 1px 6px; border: 1px solid #54402a; border-radius: 3px; background: rgba(12, 9, 6, 0.6); color: var(--ink); }
.rune { font: italic 18px/1.6 var(--head); color: #f0e4c4; text-align: center; margin: 12px 0; }
#bigmap { display: block; width: min(78vh, 90vw); height: min(78vh, 90vw); border: 1px solid var(--edge); border-radius: 4px; background: #1a1610; cursor: crosshair; }
#maplegend { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: min(78vh, 90vw); }
#maplegend span i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1px solid #000; transform: rotate(45deg); }

/* ---------------------------------------------------------------- the first screen, and the last */
#title, #won { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(8, 10, 14, 0.25) 0%, rgba(8, 10, 14, 0.72) 70%, rgba(8, 10, 14, 0.92) 100%); }
.titlebox { width: min(700px, 96vw); text-align: center; }
.titlebox > div, .titlebox > p, .titlebox > button { max-width: 440px; margin-left: auto; margin-right: auto; }
#title h1, #won h1 { font-size: clamp(40px, 8vw, 84px); margin: 0; white-space: nowrap; letter-spacing: 0.16em; padding-left: 0.16em; background: linear-gradient(#fff3c4, #e8b93a 45%, #8a5e10); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #1c1206) drop-shadow(0 0 22px rgba(232, 185, 58, 0.35)); }
#won h1 { font-size: clamp(34px, 6vw, 60px); letter-spacing: 0.1em; }
.orn { height: 12px; margin: 6px auto; width: 78%; background: linear-gradient(90deg, transparent, var(--gold2) 20%, var(--gold) 50%, var(--gold2) 80%, transparent) center / 100% 1px no-repeat; position: relative; }
.orn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--gold); transform: rotate(45deg); box-shadow: -16px 16px 0 -2px var(--gold2), 16px -16px 0 -2px var(--gold2); }
.titlebox .tag { font: italic 18px var(--head); color: #e0d4b8; margin: 14px 0 22px; text-shadow: 0 1px 4px #000; }
.foot { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; }
#dead { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(40, 0, 0, 0.35), rgba(10, 0, 0, 0.85)); text-align: center; }
#dead h1 { font-size: 54px; letter-spacing: 0.14em; color: #e8c8b8; }
#dead p { font: italic 18px var(--head); margin: 6px; }
#fade { position: fixed; inset: 0; z-index: 40; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.2s; }
#fade.on { opacity: 1; }

@media (max-width: 860px) {
  .cols { flex-direction: column; }
  .g8 { grid-template-columns: repeat(8, 40px); }
  .slot { width: 40px; height: 40px; background-size: 32px; }
  #log { width: 240px; }
}