: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); }
#t-chars .who { margin: 0 0 10px; }
#t-chars .who button.big { margin-bottom: 0; }
#t-chars .who .kind { color: var(--dim); font-size: 13px; letter-spacing: 0.04em; margin-right: 12px; }
#t-chars .who .kind:empty { margin-right: 0; }
#t-newhead { margin: 14px 0 6px; color: #e0d4b8; }
#t-newhead:empty { display: none; }
#t-who { margin: 0 0 8px; color: #e0d4b8; }
#t-who:empty, #t-hold:empty { display: none; }
#t-hold { margin: 6px 0 12px; }
#t-wallets a.big { display: block; padding: 10px 14px; margin: 8px 0; font: 16px var(--head); letter-spacing: 0.06em; text-decoration: none; text-align: center; border-radius: 4px; }
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 25s 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; }
}
/* ---------------------------------------------------------------- touch */
.ontouch { display: none; }
body.touch .ontouch { display: block; }
body.touch .notouch { display: none; }
#touch { position: fixed; inset: 0; z-index: 12; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#touch button { pointer-events: auto; touch-action: none; min-width: 58px; min-height: 44px; padding: 6px 10px; border-radius: 22px; border: 1px solid #8a6e3c; background: rgba(28, 20, 13, 0.62); color: #f0e2bc; font: 600 13px var(--body, sans-serif); letter-spacing: 0.03em; }
#touch button.on, #touch button:active { background: rgba(200, 150, 50, 0.78); color: #1c140e; }
#touch button.main { min-width: 92px; min-height: 92px; border-radius: 50%; font-size: 16px; border-width: 2px; }
#k-move { position: absolute; left: 0; bottom: 0; width: 44%; height: 62%; pointer-events: auto; touch-action: none; }
#k-stick { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(240, 226, 188, 0.5); background: rgba(28, 20, 13, 0.28); }
#k-stick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(240, 226, 188, 0.6); }
#k-top { position: absolute; left: 50%; top: max(6px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; gap: 6px; }
#k-top button { min-height: 36px; min-width: 52px; padding: 4px 9px; }
#k-fight, #k-raise { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, auto); gap: 8px; align-items: end; justify-items: end; }
#k-fight .main, #k-raise .main { grid-column: 3; grid-row: 1 / span 2; }
#k-close { position: absolute; right: max(10px, env(safe-area-inset-right)); top: max(6px, env(safe-area-inset-top)); z-index: 60; }
#k-turn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; background: rgba(8, 10, 14, 0.9); color: #f0e2bc; font: 600 18px var(--head, serif); pointer-events: auto; z-index: 70; }
#k-drop { min-height: 34px; padding: 4px 12px; border-radius: 17px; border: 1px solid #8a6e3c; background: rgba(28, 20, 13, 0.7); color: #f0e2bc; }
#k-drop.on { background: #b8462e; color: #fff; }
body.touch #view { touch-action: none; }
body.touch { overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
body.touch .panel { touch-action: pan-y; z-index: 50; }
body.touch #inv { touch-action: none; }
/* The picture's corners are the thumbs' now: what was written there moves to the top. */
body.touch #hotbar { pointer-events: auto; top: 50px; }
body.touch #hotbar .slot { width: 40px; height: 40px; }
body.touch #vitals { left: 14px; top: 100px; bottom: auto; width: 190px; }
body.touch #stbar { left: 14px; top: 150px; bottom: auto; right: auto; width: 190px; transform: none; }
body.touch #log { top: 170px; width: 300px; }
body.touch #chat { bottom: auto; top: 50px; left: 50%; transform: translateX(-50%); width: min(420px, 80vw); z-index: 61; }
body.touch #mapbox { width: 104px; height: 104px; }
body.touch #mapbox canvas { width: 104px; height: 104px; }
body.touch #topright { top: 50px; width: 120px; font-size: 12px; }
body.touch #buildhint { bottom: auto; top: 96px; }
body.touch #hover { top: calc(50% + 30px); }
body.touch #raven { right: auto; left: 50%; bottom: auto; top: 96px; transform: translateX(-50%); width: min(360px, 44vw); font-size: 12px; padding: 6px 10px; }
body.touch #toast { top: 30%; font-size: 22px; }
body.touch .panel.wide { width: 98vw; max-height: 96vh; padding: 12px 14px; }
body.touch .panel.wide .cols { flex-direction: row; gap: 14px; }
body.touch #inv.grid .slot, body.touch #chest.grid .slot { width: 40px; height: 40px; }
#touch.over { z-index: 60; }
body.touch #side-tabs .tabs { margin-right: 78px; }
body.touch .panel:not(.wide) { max-height: 94vh; padding-top: 14px; }
/* ---------------------------------------------------------------- the Norse dressing
Everything above says where things sit. This says what they are made of: oak boards, a
bronze braid, iron studs. The frames are drawn by tools/make-ui.mjs into public/ui and laid
on with border-image, which keeps a frame's corners whole at any size. */
:root { --bronze: #c2933f; --bronze-hi: #f0d184; --bronze-lo: #7a531f; --bronze-deep: #3c2710; --iron: #3a3632; --oak: #241810; --bone: #efe2c0; }
html, body { color: var(--bone); }
h1, h2, h3 { font-variant: small-caps; }
h2 { color: var(--bronze-hi); letter-spacing: 0.09em; text-shadow: 0 1px 0 #000, 0 0 10px rgba(240, 209, 132, 0.18); }
h2::after { content: ""; display: block; height: 12px; margin: 3px 0 2px -30px; background: url(ui/divider.svg) left center / auto 12px no-repeat; opacity: 0.9; }
.warnbox h2::after { filter: hue-rotate(-28deg) saturate(1.3); }
* { scrollbar-width: thin; scrollbar-color: var(--bronze-lo) #140d07; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #140d07; }
*::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--bronze-lo), var(--bronze), var(--bronze-lo)); border: 2px solid #140d07; border-radius: 5px; }
/* Boards and their frame. */
.panel, .warnbox {
border: 24px solid transparent; border-image: url(ui/panel.svg) 40 / 24px / 0 round; border-radius: 0;
background: linear-gradient(rgba(30, 20, 12, 0.5), rgba(12, 8, 4, 0.74)), url(ui/wood.svg) #241810; background-size: auto, 256px 256px;
padding: 12px 16px; box-shadow: 0 26px 80px rgba(0, 0, 0, 0.78), 0 0 0 1px #000;
}
.panel.map { padding: 6px; }
.warnbox { border-image-source: url(ui/panel.svg); background: linear-gradient(rgba(60, 20, 14, 0.55), rgba(22, 8, 6, 0.8)), url(ui/wood.svg) #241810; }
/* Buttons: a plank bound in bronze; the gold ones cast whole. */
button { border: solid transparent; border-width: 9px 13px; border-image: url(ui/button.svg) 14 fill / 9px 13px / 0 stretch; background: none; border-radius: 0; padding: 0 5px; min-height: 34px; color: var(--bone); font-family: var(--head); letter-spacing: 0.05em; text-shadow: 0 1px 1px #000; transition: filter 0.12s, transform 0.06s; }
button:hover { filter: brightness(1.22); color: #fff; }
button:active { transform: translateY(1px); filter: brightness(0.92); }
button:disabled { filter: grayscale(0.7) brightness(0.75); opacity: 0.6; }
button.gold, .tabs button.on { border-image-source: url(ui/button-gold.svg); color: #22160a; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 233, 173, 0.6); background: none; }
button.gold:hover, .tabs button.on:hover { color: #000; filter: brightness(1.1); }
button.big { border-width: 12px 16px; border-image-width: 12px 16px; padding: 2px 8px; min-height: 46px; font-size: 17px; letter-spacing: 0.09em; font-variant: small-caps; }
button.link { border: none; border-image: none; min-height: 0; padding: 4px; text-shadow: none; font-family: var(--body); letter-spacing: 0; }
#t-wallets a.big { border: solid transparent; border-width: 12px 16px; border-image: url(ui/button-gold.svg) 14 fill / 12px 16px / 0 stretch; color: #22160a; font-weight: 700; padding: 2px 8px; border-radius: 0; font-variant: small-caps; }
.item button { min-height: 28px; border-width: 7px 11px; border-image-width: 7px 11px; }
/* Wells to write in. */
input[type=text], input[type=number], input:not([type]), select { background: #0f0a06; border: 1px solid var(--bronze-lo); border-radius: 2px; box-shadow: inset 0 2px 6px #000, 0 0 0 1px #000; color: var(--bone); }
input:focus, select:focus { outline: none; border-color: var(--bronze-hi); box-shadow: inset 0 2px 6px #000, 0 0 0 1px #000, 0 0 8px rgba(240, 209, 132, 0.35); }
input[type=range] { accent-color: var(--bronze); }
input[type=checkbox] { accent-color: var(--bronze); width: 16px; height: 16px; }
/* A place for one thing: a well in the wood with bronze at its corners. */
.slot { border: 9px solid transparent; border-image: url(ui/slot.svg) 14 / 9px / 0 stretch; border-radius: 0; background-color: rgba(14, 9, 5, 0.8); box-shadow: inset 0 0 0 9px rgba(14, 9, 5, 0.8); background-origin: border-box; }
.slot.eq { border-image-source: url(ui/slot-on.svg); background-color: rgba(52, 34, 12, 0.92); box-shadow: inset 0 0 0 9px rgba(52, 34, 12, 0.92), 0 0 10px rgba(240, 209, 132, 0.4); }
.slot.arrow { box-shadow: inset 0 0 0 9px rgba(14, 9, 5, 0.8), 0 0 0 1px #7fb8d8; }
.slot .n { right: -4px; bottom: -7px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.slot .k { left: -5px; top: -8px; color: var(--bronze-hi); font-family: var(--head); font-weight: 700; }
.grid .slot:hover { filter: brightness(1.35); }
.grid .slot.over { box-shadow: inset 0 0 0 9px rgba(14, 9, 5, 0.8), 0 0 0 2px var(--bronze-hi); }
.food { border: 2px solid var(--bronze); box-shadow: 0 0 0 1.5px #150f09, inset 0 0 8px #000; background-color: rgba(14, 9, 5, 0.82); }
/* Bars: an iron band with bronze caps, like the fittings of a horn. */
.bar { height: 24px; border: solid transparent; border-width: 5px 15px; border-image: url(ui/bar.svg) 6 18 / 5px 15px / 0 stretch; border-radius: 0; background: #0c0704; background-clip: padding-box; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.bar i { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 4px rgba(0, 0, 0, 0.4); }
.bar span { line-height: 14px; font-family: var(--head); letter-spacing: 0.06em; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.bar.hp i { background: repeating-linear-gradient(90deg, transparent 0 25px, rgba(0, 0, 0, 0.28) 25px 26px), linear-gradient(#f0604e, #b02a20 55%, #7a1711); }
.bar.st { height: 16px; border-width: 4px 12px; border-image-width: 4px 12px; }
.bar.st i { background: repeating-linear-gradient(90deg, transparent 0 25px, rgba(0, 0, 0, 0.25) 25px 26px), linear-gradient(#f6dc6a, #c9981f 55%, #8a6412); }
.bar.st.tired { box-shadow: 0 0 12px #ff5a4a; filter: saturate(1.3); }
.bossbar { height: 22px; border-width: 5px 16px; border-image-width: 5px 16px; }
.bossbar i { background: repeating-linear-gradient(90deg, transparent 0 39px, rgba(0, 0, 0, 0.3) 39px 40px), linear-gradient(#e8483c, #8f1a15 55%, #5c0f0c); }
#bossname { font-variant: small-caps; color: var(--bronze-hi); text-shadow: 0 2px 3px #000, 0 0 14px rgba(200, 60, 40, 0.5); }
#drawmeter { height: 6px; border: 1px solid var(--bronze-lo); border-radius: 0; background: #0c0704; }
.plate i { border: 1px solid #1a120a; border-radius: 0; box-shadow: 0 0 0 1px rgba(194, 147, 63, 0.7); height: 6px; }
.skill i { height: 9px; border-radius: 0; background: #0c0704; border: 1px solid var(--bronze-lo); box-shadow: inset 0 1px 3px #000; }
.skill i u { background: linear-gradient(#f6dc6a, #b98a1f); }
/* The small map: a bronze ring cut with runes, a spear-point for north. */
#mapbox { border: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7); background: #0d1114; }
#mapbox::after { content: ""; position: absolute; inset: 0; background: url(ui/ring.svg) center / 100% 100% no-repeat; pointer-events: none; }
#north { display: none; }
#place { font-variant: small-caps; font-size: 17px; color: var(--bone); letter-spacing: 0.1em; }
#bigmap { border: 3px solid var(--bronze-lo); border-radius: 0; box-shadow: 0 0 0 1px #000, inset 0 0 30px #000; }
/* Small plaques: what a thing is, what a raven says, what a build will cost. */
.tip, .note, .list, #raven, #buildhint { border: 8px solid transparent; border-image: url(ui/plaque.svg) 16 / 8px / 0 stretch; border-radius: 0; background: rgba(13, 8, 4, 0.8); background-clip: padding-box; box-shadow: inset 0 0 0 8px rgba(13, 8, 4, 0.8); }
.tip, .note { padding: 3px 6px; }
.tip b { color: var(--bronze-hi); font-variant: small-caps; letter-spacing: 0.05em; }
#raven { padding: 2px 6px; border-left-width: 8px; }
#raven .who { color: var(--bronze-hi); font-variant: small-caps; font-style: normal; letter-spacing: 0.08em; }
#buildhint { padding: 1px 8px; }
.note.warn { filter: none; color: #f6dc8a; }
.card { border: 1px solid var(--bronze-lo); border-radius: 0; background: rgba(13, 8, 4, 0.66); box-shadow: inset 0 0 0 1px #0a0603, inset 0 0 14px rgba(0, 0, 0, 0.6); }
.card:hover, .card.on { border-color: var(--bronze-hi); background: rgba(84, 56, 20, 0.5); box-shadow: inset 0 0 0 1px #0a0603, 0 0 10px rgba(240, 209, 132, 0.3); }
.item { border-bottom: 1px solid rgba(122, 83, 31, 0.35); }
.item:hover, .item.on { background: linear-gradient(90deg, rgba(194, 147, 63, 0.32), rgba(194, 147, 63, 0.05)); box-shadow: inset 3px 0 0 var(--bronze); }
.cost, .buff { border: 1px solid var(--bronze-lo); border-radius: 2px; background: rgba(13, 8, 4, 0.8); box-shadow: inset 0 0 0 1px #0a0603; }
.buff { padding: 1px 9px; font-family: var(--head); letter-spacing: 0.04em; }
.stats > div { border-bottom: 1px solid rgba(122, 83, 31, 0.35); }
.goal::before { border-color: var(--bronze); }
.goal.done::before { background: var(--bronze); }
/* Words that come and go at the edges. */
#log div, #chatlog div, #feed div { background-color: transparent; background-image: linear-gradient(90deg, rgba(16, 10, 5, 0.82), rgba(16, 10, 5, 0.5) 70%, rgba(16, 10, 5, 0)); border-left: 3px solid var(--bronze); border-radius: 0; padding-top: 3px; padding-bottom: 3px; }
#feed div { background-image: linear-gradient(270deg, rgba(16, 10, 5, 0.82), rgba(16, 10, 5, 0.5) 70%, rgba(16, 10, 5, 0)); border-left: none; border-right: 3px solid var(--bronze); background-repeat: no-repeat; }
#chatlog div b { color: var(--bronze-hi); font-variant: small-caps; }
#toast { font-variant: small-caps; color: #f8ecc8; text-shadow: 0 2px 4px #000, 0 0 18px rgba(240, 209, 132, 0.3); }
#toast::after { content: ""; display: block; height: 14px; margin: 2px auto 0; width: min(360px, 60vw); background: url(ui/divider.svg) center / auto 14px no-repeat; }
#toast small { font-variant: normal; }
/* A key to press, as a little rune stone. */
#hover .a b, .keys b { border: 1px solid #8f887b; border-radius: 3px 3px 5px 5px; background: linear-gradient(#625c53, #2d2925); color: var(--bone); box-shadow: 0 2px 0 #12100d, inset 0 1px 0 rgba(255, 255, 255, 0.22); font-family: var(--head); font-weight: 700; padding: 0 6px; text-shadow: 0 1px 0 #000; }
#hover .t { font-variant: small-caps; font-size: 18px; color: #f8ecc8; }
.coin { width: 14px; height: 14px; border-color: var(--bronze-deep); box-shadow: 0 0 0 1px #000; }
#purse { font-family: var(--head); font-weight: 700; color: var(--bronze-hi); }
/* The first screen. */
.orn { height: 20px; width: 82%; background: url(ui/divider.svg) center / auto 20px no-repeat; }
.orn::after { display: none; }
#title h1, #won h1 { font-variant: normal; }
#dead h1 { color: #f0c8b0; text-shadow: 0 3px 0 #1a0504, 0 0 30px rgba(200, 40, 20, 0.6); }
#dead h1::after { content: ""; display: block; height: 18px; margin: 4px auto; width: 380px; max-width: 80vw; background: url(ui/divider.svg) center / auto 18px no-repeat; filter: hue-rotate(-32deg) saturate(1.4); }
/* Thumbs: each button a small round shield, wood within a bronze rim. */
#touch button { border: 2px solid var(--bronze); border-image: none; background: radial-gradient(circle at 50% 38%, rgba(74, 51, 32, 0.9), rgba(26, 17, 10, 0.86) 70%); box-shadow: 0 0 0 2px rgba(20, 13, 8, 0.9), inset 0 0 0 1px rgba(240, 209, 132, 0.35), 0 3px 8px rgba(0, 0, 0, 0.55); color: var(--bone); font-family: var(--head); font-variant: small-caps; font-size: 14px; letter-spacing: 0.06em; min-height: 44px; padding: 6px 10px; border-radius: 22px; }
#touch button.on, #touch button:active { background: radial-gradient(circle at 50% 38%, #f0d184, #b98a3c 70%); color: #22160a; filter: none; transform: none; text-shadow: none; }
#touch button.main { border-width: 3px; border-radius: 50%; font-size: 17px; }
#touch #k-top button { min-height: 36px; }
#k-stick { border-color: rgba(240, 209, 132, 0.6); background: radial-gradient(circle, rgba(26, 17, 10, 0.2), rgba(26, 17, 10, 0.5)); box-shadow: inset 0 0 0 2px rgba(20, 13, 8, 0.6); }
#k-stick i { background: radial-gradient(circle at 40% 35%, #f0d184, #b98a3c 65%, #7a531f); box-shadow: 0 0 0 2px rgba(20, 13, 8, 0.8); }
#k-drop { border: 1px solid var(--bronze); border-image: none; min-height: 34px; }
body.touch .panel, body.touch .warnbox { border-width: 16px; border-image-width: 16px; padding: 8px 10px; }
body.touch .slot { border-width: 7px; border-image-width: 7px; }
.panel.wide { width: min(1020px, 97vw); }
.titlebox .tag { margin: 14px auto 22px; }
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; background: #0f0a06; border: 1px solid var(--bronze); box-shadow: inset 0 2px 4px #000, 0 0 0 1px #000; cursor: pointer; position: relative; }
input[type=checkbox]:checked { background: linear-gradient(#f0d184, #b98a3c); }
input[type=checkbox]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #22160a; border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
select { cursor: pointer; }
.slot, .grid .slot.over { box-shadow: none; }
.slot.eq { box-shadow: 0 0 10px rgba(240, 209, 132, 0.4); }
.slot.arrow { box-shadow: 0 0 0 1px #7fb8d8; }
.grid .slot.over { outline: 2px solid var(--bronze-hi); outline-offset: -2px; }
/* The great buttons of the first screen: a plank in a double bronze rim, studded, braided, with
a rune boss at each end (public/ui/hero.svg). */
button.hero, #t-wallets a.big { border-style: solid; border-color: transparent; border-width: 20px 44px; border-image: url(ui/hero.svg) 24 52 fill / 20px 44px / 0 round; min-height: 62px; padding: 0 6px; margin: 10px 0; font: 700 19px var(--head); letter-spacing: 0.1em; font-variant: small-caps; color: var(--bone); text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, 0.6); background: none; }
button.hero.gold, #t-wallets a.big { border-image-source: url(ui/hero-gold.svg); color: #2a1a08; text-shadow: 0 1px 0 rgba(255, 236, 180, 0.7); }
button.hero:hover, #t-wallets a.big:hover { filter: brightness(1.14) drop-shadow(0 0 8px rgba(240, 209, 132, 0.45)); }
#t-wallets a.big { display: flex; align-items: center; justify-content: center; }
#t-chars .who { margin: 0 0 4px; }
#t-chars .who button.hero { margin-bottom: 2px; }
/* The Solana shop. */
.ware { display: flex; gap: 14px; align-items: center; padding: 10px 12px; margin: 10px 0; border: 8px solid transparent; border-image: url(ui/plaque.svg) 16 / 8px / 0 stretch; background: rgba(13, 8, 4, 0.82); background-clip: padding-box; }
.ware .orb { flex: none; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fff6c8 0%, #ffd75a 22%, rgba(240, 180, 40, 0.75) 45%, rgba(200, 130, 20, 0.15) 70%, transparent 72%); box-shadow: 0 0 22px rgba(255, 200, 70, 0.55); animation: orb 2.6s ease-in-out infinite; }
@keyframes orb { 50% { box-shadow: 0 0 34px rgba(255, 210, 90, 0.85); filter: brightness(1.15); } }
.ware .what { flex: 1; min-width: 0; }
.ware h3 { margin: 0 0 3px; color: var(--bronze-hi); font-variant: small-caps; letter-spacing: 0.06em; font-size: 18px; }
.ware .price { margin-top: 6px; font: 700 15px var(--head); color: #f6dc8a; }
.ware .left { font-size: 12px; color: var(--dim); }
.ware button.hero { margin: 8px 0 0; min-height: 50px; font-size: 16px; }
.ware.owned { box-shadow: inset 0 0 0 8px rgba(13, 8, 4, 0.82), 0 0 14px rgba(240, 209, 132, 0.35); }
#shop-msg:empty { display: none; }
.ware button.hero { width: 100%; white-space: nowrap; font-size: 15px; letter-spacing: 0.06em; padding: 0 2px; }
/* Turned upright: a notice that can be set aside, and the controls packed to fit a tall screen. */
#k-turn > div { max-width: 340px; }
#k-turn p { margin: 0 0 10px; }
#k-turn button.hero { pointer-events: auto; margin-top: 16px; width: 100%; }
body.touch.upright #k-top { flex-wrap: wrap; justify-content: center; width: 96vw; gap: 5px; top: max(4px, env(safe-area-inset-top)); }
body.touch.upright #k-top button { min-width: 0; flex: 0 0 auto; padding: 4px 9px; font-size: 13px; min-height: 34px; }
body.touch.upright #hotbar { top: 96px; left: 50%; transform: translateX(-50%); }
body.touch.upright #hotbar .slot { width: 40px; height: 40px; }
body.touch.upright #topright { top: 146px; width: 96px; }
body.touch.upright #mapbox, body.touch.upright #mapbox canvas { width: 86px; height: 86px; }
body.touch.upright #vitals { top: 146px; width: 150px; }
body.touch.upright #stbar { top: 196px; width: 150px; }
body.touch.upright #log { top: 220px; width: 62vw; }
body.touch.upright #raven { top: 238px; width: 84vw; }
body.touch.upright #k-move { width: 52%; height: 45%; }
body.touch.upright #k-fight, body.touch.upright #k-raise { gap: 6px; }
body.touch.upright #touch button.main { min-width: 82px; min-height: 82px; }
/* The pack on a phone takes the whole screen, and its grid is sized to the room its column has
(never wider, so it cannot run under the crafting list). On its side the two halves sit side
by side; upright they stack, the pack first. */
body.touch #p-inv.panel.wide { left: max(4px, env(safe-area-inset-left)); right: max(4px, env(safe-area-inset-right)); top: max(4px, env(safe-area-inset-top)); bottom: max(4px, env(safe-area-inset-bottom)); width: auto; max-height: none; transform: none; overflow-y: auto; overscroll-behavior: contain; }
body.touch #p-inv .cols { flex-direction: row; gap: 12px; align-items: flex-start; }
body.touch #p-inv .cols > .col:first-child { flex: 0 0 min(380px, 46%); }
body.touch #inv.g8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
body.touch #chest.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
body.touch #inv.grid .slot, body.touch #chest.grid .slot { width: auto; height: auto; aspect-ratio: 1 / 1; background-size: 78%; }
body.touch #p-inv h2 { margin-right: 0; }
body.touch #p-inv .list { max-height: 34vh; }
body.touch #p-inv .tip { min-height: 40px; }
body.touch #p-inv .detail { min-height: 0; }
body.touch.upright #p-inv .cols { flex-direction: column; gap: 10px; }
body.touch.upright #p-inv .cols > .col { flex: none; width: 100%; }
body.touch.upright #p-inv .cols > .col:first-child h2 { margin-right: 96px; }
body.touch.upright #side-tabs .tabs { margin-right: 0; }
body.touch.upright #p-inv .list { max-height: 32vh; }
/* The Discord link under the wallet buttons on the title: Discord's own purple. */
/* Loading bars: on the title (what is needed to play), and slim along the top in play (the rest). */
.loadbar { position: relative; width: min(360px, 80vw); height: 22px; margin: 12px auto 4px; background: rgba(13, 8, 4, 0.85); border: 1px solid var(--bronze, #8a6a3a); border-radius: 3px; overflow: hidden; box-shadow: inset 0 2px 4px #000; }
.loadbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#f0d184, #b98a3c 60%, #7a531f); transition: width 0.25s; }
.loadbar span { position: relative; display: block; text-align: center; font: 600 12px/22px Georgia, serif; color: #fff3c4; text-shadow: 0 1px 2px #000; letter-spacing: 0.04em; }
.loadbar.slim { position: fixed; top: 0; left: 50%; transform: translateX(-50%); margin: 0; width: min(300px, 60vw); height: 14px; z-index: 30; pointer-events: none; opacity: 0.85; }
.loadbar.slim span { font-size: 10px; line-height: 14px; }
/* The minimap is drawn again whenever the view turns. Its carved ring and the map each get a
layer of their own, so the ring is painted once and kept, never painted again with the map
(painting the ring anew while turning took a whole 60 ms frame). */
#mapbox canvas { will-change: transform; transform: translateZ(0); }
#mapbox::after { will-change: transform; transform: translateZ(0); }
/* The HUD is one screen-wide layer whose text carries a soft shadow. Anything in it that changes
often (the name under the crosshair as the view sweeps across trees and stones, the clock, the
bars, the log) gets a small layer of its own: otherwise each change repainted the whole screen's
HUD, shadows and all, and a turn through a forest stuttered (a 50 ms frame each time). */
#hover, #topright, #vitals, #stbar, #buffs, #buildhint, #toast, #log, #raven { will-change: transform; }
/* Draw distance, as a slider with its reach beside it. */
.setting .with-value { display: flex; align-items: center; gap: 8px; }
.setting .with-value input { flex: 1; }
#view-dist-m { min-width: 52px; text-align: right; font-size: 13px; color: var(--bone, #e8dcc0); }
/* Wear: a thin bar along the foot of a slot (green, then red when low); a broken thing is dimmed. */
.slot .dur { position: absolute; left: 6px; right: 6px; bottom: 4px; height: 4px; background: rgba(0, 0, 0, 0.75); border-radius: 2px; overflow: hidden; pointer-events: none; }
.slot .dur i { display: block; height: 100%; background: linear-gradient(#b8e07a, #6f9a3a); }
.slot .dur.low i { background: linear-gradient(#ff8a6a, #b8321e); }
.slot.broken { filter: grayscale(0.85) brightness(0.65); }
.tip .stats.bad { color: #ff8a6a; }
#mend { display: block; margin: 6px 0 8px; width: 100%; }
/* The weekly pass on the title. */
#t-pass { margin: 6px auto 0; max-width: 360px; }
#t-pass button { width: 100%; margin-top: 4px; }
#p-lock .row button.on { border-image-source: url(ui/button-gold.svg); color: #22160a; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 233, 173, 0.6); background: none; }
/* The operator speaks in gold. */
#chatlog div.op { color: #ffd257; text-shadow: 0 0 6px rgba(255, 190, 60, 0.55), 0 1px 1px #000; border-left-color: #ffd257; animation-duration: 50s; }
#chatlog div.op b { color: #ffe08a; }
/* Chat history: shown above the box while it is open, scrolled with the wheel or a finger. */
#chatlog { pointer-events: auto; cursor: pointer; }
#chathist { max-height: min(42vh, 360px); overflow-y: auto; overscroll-behavior: contain; margin-bottom: 4px; padding: 4px 2px; background: rgba(12, 9, 6, 0.72); border: 1px solid rgba(138, 110, 60, 0.6); display: flex; flex-direction: column; gap: 2px; touch-action: pan-y; }
#chathist div { padding: 2px 8px; overflow-wrap: anywhere; border-left: 3px solid var(--bronze); }
#chathist div b { color: var(--bronze-hi); font-variant: small-caps; margin-right: 5px; }
#chathist div i { color: var(--dim); font-style: normal; font-size: 0.85em; margin-right: 6px; }
#chathist div.note { color: var(--dim); font-style: italic; border-left-color: transparent; }
#chathist div.op { color: #ffd257; border-left-color: #ffd257; text-shadow: 0 0 6px rgba(255, 190, 60, 0.45), 0 1px 1px #000; }
#chathist div.op b { color: #ffe08a; }
/* Party frames, top left under the hotbar; an invitation at the top middle. */
#party { position: absolute; left: 14px; top: 76px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
#party .pm { display: flex; align-items: center; gap: 7px; width: 214px; padding: 4px 8px 4px 4px; background: linear-gradient(90deg, rgba(16, 10, 5, 0.85), rgba(16, 10, 5, 0.55)); border-left: 3px solid var(--bronze); }
#party .pm.down { opacity: 0.5; }
#party .pic { width: 42px; height: 42px; flex: none; border: 1px solid #8a6e3c; background: #1b130c center / cover no-repeat; }
#party .info { flex: 1; min-width: 0; }
#party .info b { display: block; font-variant: small-caps; color: var(--bronze-hi); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#party .lead { color: #ffd257; font-size: 10px; margin-left: 6px; font-variant: normal; letter-spacing: 0.04em; }
#party .pbar { height: 6px; margin-top: 3px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(138, 110, 60, 0.5); overflow: hidden; position: relative; }
#party .pbar i { display: block; height: 100%; transform-origin: left; }
#party .pbar.hp i { background: linear-gradient(#d4473a, #8f2219); }
#party .pbar.st i { background: linear-gradient(#f0c64e, #a8801c); }
#pinvite { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); z-index: 30; pointer-events: auto; padding: 10px 16px; background: rgba(18, 12, 7, 0.92); border: 1px solid #8a6e3c; text-align: center; }
#pinvite p { margin: 0 0 8px; }
body.touch #party { top: 104px; }
body.touch.upright #party { top: 150px; }
/* The pass headline on the title: the free time and the weekly price, said first. */
#t-pass .passhead { font-size: 14px; color: #f3e3b8; line-height: 1.45; margin: 4px 0 6px; }
/* Party frames can be clicked (while the pointer is free) for the party's options. */
#party .pm { pointer-events: auto; cursor: pointer; }
#party .pm:hover { border-left-color: var(--gold); }
#pl-acts .row b { flex: 1; }
/* Chests hold 48: eight across, scrolled if the screen is short. */
#chest.g4 { grid-template-columns: repeat(8, 44px); max-height: 52vh; overflow-y: auto; }
#chest.g4 .slot { width: 44px; height: 44px; }
body.touch #chest.g4 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
/* The Shop button, to the upper left of the compass. */
#shoplink { position: absolute; top: 14px; right: 204px; pointer-events: auto; padding: 6px 14px; min-height: 0; font: 700 14px var(--head); letter-spacing: 0.06em; font-variant: small-caps; border-image-source: url(ui/button-gold.svg); color: #22160a; text-shadow: 0 1px 0 rgba(255, 233, 173, 0.6); }
body.touch #shoplink { top: 50px; right: 142px; padding: 4px 10px; font-size: 12px; }
body.touch.upright #shoplink { top: 146px; right: 118px; }
/* A pack in the shop: its things in a little grid where a perk has its glow. */
.ware .packgrid { flex: none; display: grid; grid-template-columns: repeat(3, 30px); gap: 3px; }
.ware .packgrid .slot { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(138, 110, 60, 0.6); border-image: none; border-radius: 3px; background-color: rgba(0, 0, 0, 0.35); background-size: 90%; background-position: center; background-repeat: no-repeat; }
/* The Wisp in the shop: a cold-white glow. */
.ware .orb.wisp { background: radial-gradient(circle at 50% 45%, #ffffff 0%, #e6f6ff 18%, rgba(150, 205, 255, 0.7) 40%, rgba(110, 170, 255, 0.15) 66%, transparent 70%); box-shadow: 0 0 22px rgba(140, 200, 255, 0.55); }
/* The pump.fun link, made like the great buttons (gold plate), with green bosses at the ends. */
#t-getvalor { display: flex; align-items: center; justify-content: center; margin: 10px auto 0; width: 100%; max-width: 360px; white-space: nowrap; text-decoration: none; text-align: center; border-style: solid; border-color: transparent; border-width: 20px 44px; border-image: url(ui/hero-pump.svg) 24 52 fill / 20px 44px / 0 round; min-height: 62px; padding: 0 2px; font: 700 17px var(--head); letter-spacing: 0.05em; font-variant: small-caps; color: #2a1a08; text-shadow: 0 1px 0 rgba(255, 236, 180, 0.7); background: none; box-sizing: border-box; }
#t-getvalor:hover { filter: brightness(1.14) drop-shadow(0 0 8px rgba(80, 220, 130, 0.45)); }
/* The Discord button: the great gold button, Discord-blue bosses with its mark at each end. */
#t-discord { display: flex; align-items: center; justify-content: center; margin: 10px auto 0; width: 100%; max-width: 360px; white-space: nowrap; text-decoration: none; text-align: center; border-style: solid; border-color: transparent; border-width: 20px 44px; border-image: url(ui/hero-discord.svg) 24 52 fill / 20px 44px / 0 round; min-height: 62px; padding: 0 2px; font: 700 17px var(--head); letter-spacing: 0.05em; font-variant: small-caps; color: #2a1a08; text-shadow: 0 1px 0 rgba(255, 236, 180, 0.7); background: none; box-shadow: none; border-radius: 0; box-sizing: border-box; }
#t-discord:hover { background: none; filter: brightness(1.14) drop-shadow(0 0 8px rgba(110, 125, 255, 0.5)); }
/* The title's words, brighter and outlined so they read over the moving land. */
#title .tag { font: italic 19px var(--head); color: #fff3d6; text-shadow: 0 2px 3px #000, 0 0 10px rgba(0, 0, 0, 0.9); }
#title p:not(.tag), #title .small, #title .foot { color: #f6ecd2; font-size: 14px; text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 12px rgba(0, 0, 0, 0.85); }
#title #t-pass .passhead { font-size: 15px; color: #fff5dc; }
#title #t-err { color: #ffb4a8; }
#title button.link { color: #f0dfb2; font-size: 14px; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
/* ---------------------------------------------------------------- HUD polish (2026-10-20) */
/* Health and stamina: larger on a desktop screen. */
body:not(.touch) #vitals { width: 380px; bottom: 18px; }
body:not(.touch) #vitals .bar.hp { height: 34px; border-width: 7px 20px; border-image-width: 7px 20px; }
body:not(.touch) #hptext { font-size: 15px; line-height: 20px; }
body:not(.touch) #stbar { width: 460px; height: 22px; border-width: 5px 15px; border-image-width: 5px 15px; bottom: 24px; }
/* The states under the map: carved plaques, a drawn sign in a bronze ring, the name, the time. */
#buffs { gap: 5px; }
.buff { display: flex; align-items: center; gap: 7px; min-width: 140px; box-sizing: border-box; padding: 3px 10px 3px 3px; border: 1px solid #6a4e2c; border-radius: 3px; background: linear-gradient(90deg, rgba(40, 27, 15, 0.94), rgba(22, 14, 8, 0.9)); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.12), inset 0 0 0 1px #120a05, 0 2px 6px rgba(0, 0, 0, 0.55); font-family: var(--head); letter-spacing: 0.04em; color: #efe0bd; position: relative; }
.buff::before { content: ""; position: absolute; left: -1px; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: #8a6a3a; }
.buff .sign { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a2a18, #140c06 75%); box-shadow: 0 0 0 1.5px #a07a3c, 0 0 0 3px #2a1b0c, inset 0 1px 2px rgba(0, 0, 0, 0.8); }
.buff .sign svg { width: 14px; height: 14px; fill: #e8cf8f; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7)); }
.buff .words { display: flex; flex-direction: column; line-height: 1.05; }
.buff .words b { font-size: 12.5px; font-weight: 600; font-variant: small-caps; }
.buff .words i { font-style: normal; font-size: 11px; color: #c8b48a; font-family: var(--body, sans-serif); letter-spacing: 0.02em; }
.buff.good::before { background: #6fa84a; box-shadow: 0 0 6px rgba(120, 200, 90, 0.6); }
.buff.good .sign svg { fill: #bfe89a; }
.buff.bad::before { background: #c0503a; box-shadow: 0 0 6px rgba(230, 90, 60, 0.6); }
.buff.bad .sign svg { fill: #ffb49a; }
.buff.boon::before { background: #f0c860; box-shadow: 0 0 8px rgba(255, 210, 90, 0.7); }
.buff.boon .sign { box-shadow: 0 0 0 1.5px #f0c860, 0 0 0 3px #2a1b0c, 0 0 8px rgba(255, 210, 90, 0.5); }
.buff.boon .words b { color: #ffe08a; }
/* Menu controls in the island's own look: no browser defaults left. */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(#120a05, #2a1b0e); border: 1px solid #6a4e2c; box-shadow: inset 0 1px 2px #000; }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(#120a05, #2a1b0e); border: 1px solid #6a4e2c; }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: linear-gradient(#d8a640, #8a5e18); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ffe6a0, #c9921f 55%, #6a4510); border: 1px solid #2a1a08; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ffe6a0, #c9921f 55%, #6a4510); border: 1px solid #2a1a08; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; border: 1px solid #8a6a3a; border-radius: 3px; background: linear-gradient(#1a1009, #2c1d10); box-shadow: inset 0 1px 3px #000; cursor: pointer; display: inline-grid; place-items: center; }
input[type="checkbox"]::after { content: ""; width: 10px; height: 10px; border-radius: 2px; transform: scale(0) rotate(45deg); transition: transform 0.12s; background: radial-gradient(circle at 38% 32%, #ffe6a0, #d4a03a 60%, #8a5c16); box-shadow: 0 0 6px rgba(255, 200, 90, 0.6); }
input[type="checkbox"]:checked::after { transform: scale(1) rotate(45deg); }
select { -webkit-appearance: none; appearance: none; padding: 7px 34px 7px 12px; border: 1px solid #8a6a3a; border-radius: 3px; color: #efe0bd; font-family: var(--head); letter-spacing: 0.04em; cursor: pointer; background: linear-gradient(45deg, transparent 50%, #d8b468 50%) calc(100% - 17px) 52% / 6px 6px no-repeat, linear-gradient(135deg, #d8b468 50%, transparent 50%) calc(100% - 11px) 52% / 6px 6px no-repeat, linear-gradient(#2c1d10, #160d06); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.1), 0 1px 3px rgba(0, 0, 0, 0.5); }
select option { background: #1e140b; color: #efe0bd; }
input[type="number"], input[type="text"], #chatin, #name { border: 1px solid #8a6a3a; border-radius: 3px; background: linear-gradient(#120a05, #1e140b); color: #f3e7c6; box-shadow: inset 0 1px 3px #000; font-family: var(--body, sans-serif); }
input[type="number"]:focus, input[type="text"]:focus, #chatin:focus, #name:focus, select:focus { outline: none; border-color: #e0b860; box-shadow: inset 0 1px 3px #000, 0 0 0 2px rgba(224, 184, 96, 0.25); }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
* { scrollbar-width: thin; scrollbar-color: #8a6a3a #120a05; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #120a05; border-radius: 5px; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #6a4e2c, #a07a3c); border-radius: 5px; border: 2px solid #120a05; }
/* ---------------------------------------------------------------- referrals (2026-10-21) */
.reflink { display: flex; gap: 8px; margin: 10px 0; }
.reflink input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px; }
.reflink button { flex: none; padding: 0 18px; }
.refstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 4px; }
.refstats div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 1px solid #6a4e2c; border-radius: 3px; background: rgba(13, 8, 4, 0.7); }
.refstats span { font-size: 11px; color: #c8b48a; text-align: center; }
.refstats b { font-family: var(--head); font-size: 22px; color: #f0d48a; }
.refhead { margin: 14px 0 0; font-family: var(--head); letter-spacing: 0.06em; color: #f0d48a; }
.ware .orb.silveraura { background: radial-gradient(circle at 50% 45%, #ffffff 0%, #e8eef8 22%, rgba(190, 205, 230, 0.75) 45%, rgba(150, 165, 195, 0.15) 70%, transparent 72%); box-shadow: 0 0 22px rgba(200, 215, 240, 0.6); }
/* The Referrals button: the Solana Shop's cast plate in blue (ui/hero-blue.svg). */
button.hero.blue { border-image-source: url(ui/hero-blue.svg); color: #f2f8ff; text-shadow: 0 1px 0 #0a1a3a, 0 0 8px rgba(10, 30, 70, 0.7); }
/* A free week, in the referral shop. */
.ware .weekpic { flex: none; width: 74px; height: 74px; border-radius: 50%; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #3a2a18, #140c06 75%); box-shadow: 0 0 0 2px #a07a3c, 0 0 0 4px #2a1b0c, 0 0 14px rgba(255, 200, 90, 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.8); }
.ware .weekpic svg { width: 50px; height: 50px; margin-top: -8px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8)); }
.ware .weekpic span { position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; font: 700 10px var(--head); letter-spacing: 0.06em; font-variant: small-caps; color: #f0d48a; text-shadow: 0 1px 0 #000; }
.ware .orb.week { background: radial-gradient(circle at 50% 45%, #ffffff 0%, #d8ecff 20%, rgba(90, 160, 240, 0.75) 45%, rgba(40, 90, 190, 0.15) 70%, transparent 72%); box-shadow: 0 0 22px rgba(110, 170, 255, 0.55); }
/* The Shop button by the compass, a size up (desktop). */
body:not(.touch) #shoplink { top: 12px; right: 206px; padding: 9px 22px; font-size: 18px; letter-spacing: 0.08em; }
/* Choosing one's own referral link. */
.refcustom { align-items: center; }
.refcustom .refbase { flex: none; font-size: 12px; color: #c8b48a; }
.refcustom input { min-width: 0; }
.refcustom button { flex: none; padding: 0 12px; }
/* The add-ons in the Solana shop. */
.ware .addonpic { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #3a2a18, #140c06 75%); box-shadow: 0 0 0 2px #a07a3c, 0 0 0 4px #2a1b0c, 0 0 14px rgba(255, 200, 90, 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.8); }
.ware .addonpic svg { width: 52px; height: 52px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8)); }
/* The state plaques, bigger and plainer to see (2026-10-21). */
#buffs { gap: 7px; }
.buff { min-width: 190px; padding: 5px 14px 5px 5px; gap: 10px; border: 1.5px solid #b08a4a; background: linear-gradient(90deg, rgba(48, 32, 16, 0.97), rgba(26, 16, 8, 0.95)); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.18), 0 0 0 1px #120a05, 0 3px 10px rgba(0, 0, 0, 0.7); }
.buff::before { width: 4px; top: 4px; bottom: 4px; }
.buff .sign { width: 34px; height: 34px; }
.buff .sign svg { width: 20px; height: 20px; }
.buff .words b { font-size: 16px; text-shadow: 0 1px 2px #000; color: #fff2d6; }
.buff .words i { font-size: 13px; color: #e8d6ae; }
.buff.good .words b { color: #e6ffd2; }
.buff.bad .words b { color: #ffe0d6; }
body.touch .buff { min-width: 150px; padding: 3px 10px 3px 3px; }
body.touch .buff .sign { width: 26px; height: 26px; }
body.touch .buff .words b { font-size: 13px; }
/* When the states would reach Muninn's box, they run on in a second column to the left. */
body:not(.touch) #buffs { flex-wrap: wrap-reverse; flex-direction: column; align-content: flex-start; max-height: max(110px, calc(100vh - 530px)); }
/* Marks on the map: the bar under it. */
#markbar { margin-top: 8px; min-height: 34px; display: flex; align-items: center; max-width: min(78vh, 90vw); }
#markbar .edit { display: flex; gap: 8px; align-items: center; width: 100%; }
#markbar .edit[hidden], #markbar .hint[hidden] { display: none; }
#markname { flex: 1; min-width: 0; padding: 6px 9px; }
#markcols { display: flex; gap: 5px; }
.markcol { width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid #120a05; box-shadow: 0 0 0 1px #8a6a3a; cursor: pointer; }
.markcol.on { box-shadow: 0 0 0 2px #fff; }
#markdel { padding: 4px 12px; min-height: 0; }
/* A red button for what cannot be undone, and the "Are you sure?" box (2026-10-21). */
button.danger { background: linear-gradient(#a8302a, #6e1814); border: 1px solid #e0564a; color: #fff3ee; font-weight: 700; letter-spacing: 0.04em; border-radius: 3px; padding: 6px 14px; text-shadow: 0 1px 0 #3a0806; box-shadow: inset 0 1px 0 rgba(255, 200, 190, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5); cursor: pointer; }
button.danger:hover { background: linear-gradient(#c43a32, #84201a); }
.sure { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(0, 0, 0, 0.66); }
.sure[hidden] { display: none; }
.surebox { width: min(420px, 90vw); padding: 22px 24px; border: 8px solid transparent; border-image: url(ui/plaque.svg) 16 / 8px / 0 stretch; background: rgba(18, 11, 6, 0.97); background-clip: padding-box; text-align: center; }
.surebox h3 { margin: 0 0 10px; font: 700 26px var(--head); letter-spacing: 0.1em; font-variant: small-caps; color: #ff8a7a; }
.surebox p { margin: 0 0 16px; color: #efe0bd; line-height: 1.45; }
.surerow { display: flex; gap: 12px; justify-content: center; }
.surerow button { flex: 1; margin: 0; }
/* The crosshair, as in Valheim: a thin plus, a hair of dark round it; brighter and a touch larger
over something that can be used. */
#cross i { display: none; }
#cross::before, #cross::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); transition: transform 0.12s, background 0.12s; }
#cross::before { left: -7px; top: -1px; width: 14px; height: 2px; }
#cross::after { left: -1px; top: -7px; width: 2px; height: 14px; }
#cross.on::before, #cross.on::after { background: #ffe9a8; transform: scale(1.3); }
/* The Book of Making (2026-10-22): a big book of everything that can be made. */
.makerow { display: flex; gap: 8px; align-items: stretch; }
.makerow > .gold { flex: 1; }
.bookbtn { position: relative; padding: 6px 12px 6px 34px; border: 1px solid #8a6a3a; border-radius: 4px; background: linear-gradient(#5a3a1e, #3c2410); color: #f3dfb0; font: 700 14px var(--head); letter-spacing: 0.04em; cursor: pointer; white-space: nowrap; }
.bookbtn:hover { background: linear-gradient(#6e4826, #4a2c14); color: #fff2cc; }
.bookbtn::before { content: ""; position: absolute; left: 10px; top: 50%; width: 16px; height: 13px; margin-top: -7px; border: 2px solid #e8c878; border-radius: 1px 3px 3px 1px; background: linear-gradient(90deg, #8a2a1e 0 22%, #b8862e 22% 28%, #8a2a1e 28%); box-shadow: inset 0 -2px 0 #f0e2bc; }
.book { position: fixed; inset: 0; z-index: 8500; display: grid; place-items: center; background: rgba(0, 0, 0, 0.62); }
.book[hidden] { display: none; }
.bookbox { display: flex; flex-direction: column; width: min(1040px, 95vw); height: min(780px, 90vh); border: 10px solid transparent; border-image: url(ui/plaque.svg) 16 / 10px / 0 stretch; background: #2a1a0c; background-clip: padding-box; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.bookhead { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(#4a2e16, #33200e); border-bottom: 2px solid #7a5428; }
.bookhead h2 { margin: 0; font: 700 28px var(--head); font-variant: small-caps; letter-spacing: 0.08em; color: #f6dc98; text-shadow: 0 2px 0 #1a0e04; white-space: nowrap; }
#book-find { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid #8a6a3a; border-radius: 4px; background: #f1e4c2; color: #2c1c0c; font: 15px var(--body, inherit); }
.bookx { padding: 7px 14px; border: 1px solid #8a6a3a; border-radius: 4px; background: #3c2410; color: #f3dfb0; cursor: pointer; }
.bookx:hover { background: #5a3a1e; }
.bookbody { flex: 1; min-height: 0; display: flex; }
.booktabs { width: 220px; flex: none; overflow-y: auto; padding: 10px 8px; background: linear-gradient(90deg, #2e1c0c, #3a2412); border-right: 2px solid #7a5428; }
.booksect { margin: 12px 6px 6px; font: 700 12px var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: #b8955a; }
.booktabs button { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin: 0 0 4px; padding: 8px 10px; border: 1px solid transparent; border-radius: 3px; background: none; color: #e8d2a2; font: 600 15px var(--head); text-align: left; cursor: pointer; }
.booktabs button small { font: 12px var(--body, inherit); color: #b39868; }
.booktabs button:hover { background: rgba(255, 220, 150, 0.08); }
.booktabs button.on { border-color: #b8862e; background: linear-gradient(90deg, #f1e4c2, #e2cf9e); color: #2c1c0c; }
.booktabs button.on small { color: #6a4a22; }
.bookpages { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); align-content: start; gap: 12px; background: radial-gradient(ellipse at 50% 0%, #f4e8c8, #e3d2a4 70%, #d4bf8a); }
.bookempty { grid-column: 1 / -1; color: #5a3e1e; font-style: italic; text-align: center; margin-top: 40px; }
.page { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; padding: 10px 12px; border: 1px solid #b89a62; border-radius: 4px; background: rgba(255, 250, 235, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 4px rgba(90, 60, 20, 0.15); color: #2c1c0c; }
.page.ready { border-color: #4f8a3a; background: rgba(232, 248, 220, 0.7); }
.pic { grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 4px; background: #3a2614 center / 88% no-repeat; box-shadow: inset 0 0 0 1px #6a4a22; }
.phead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.phead b { font: 700 17px var(--head); color: #2c1c0c; }
.pwhere { font-size: 12px; color: #7a5a2e; font-style: italic; }
.pready { margin-left: auto; padding: 1px 8px; border-radius: 10px; background: #4f8a3a; color: #f2ffe8; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; }
.pbody { min-width: 0; }
.pstats { margin: 2px 0 6px; font-size: 12px; color: #5a4020; }
.pcosts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.pcost { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 12px; background: rgba(120, 60, 40, 0.12); border: 1px solid rgba(140, 70, 40, 0.35); font-size: 12.5px; color: #5a2a18; }
.pcost .ic { width: 20px; height: 20px; border-radius: 50%; background: #3a2614 center / 90% no-repeat; }
.pcost small { font-size: 11px; opacity: 0.75; }
.pcost.got { background: rgba(70, 130, 50, 0.14); border-color: rgba(70, 130, 50, 0.45); color: #2a5418; }
@media (max-width: 640px) {
.bookbody { flex-direction: column; }
.booktabs { width: auto; display: flex; overflow-x: auto; border-right: 0; border-bottom: 2px solid #7a5428; padding: 6px; }
.booktabs button { width: auto; flex: none; margin: 0 4px 0 0; gap: 6px; }
.booksect { display: none; }
.bookhead h2 { font-size: 20px; }
}
/* Muninn's riddle (2026-10-22). */
.checkbox h3 { color: #f6dc98; }
.checkbox img { display: block; margin: 4px auto 14px; border: 2px solid #7a5428; border-radius: 3px; image-rendering: auto; }
.checkrow { display: flex; gap: 10px; }
.checkrow input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #8a6a3a; border-radius: 4px; background: #f1e4c2; color: #2c1c0c; font: 700 20px var(--head); letter-spacing: 0.2em; text-align: center; }
.checkrow button { flex: none; margin: 0; }
#check-note { margin: 12px 0 0; color: #d8c49a; }
/* Pack badges (2026-10-22): eaten, or worn and held. */
.slot .badge { position: absolute; left: -7px; bottom: -8px; width: 18px; height: 18px; z-index: 1; pointer-events: none; background: center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.slot .badge.gear { background-image: url("data:image/svg+xml;utf8,"); }
.slot .badge.food { background-image: url("data:image/svg+xml;utf8,"); }
#check-form button.big { display: inline-block; width: auto; margin: 0; padding: 10px 18px; }
#check-form input { min-width: 140px; }
/* Four food places, always shown (2026-10-22): a free one dim, a faint drumstick in it. */
#foods { min-height: 42px; }
.food.empty { opacity: 0.55; border-style: dashed; background: rgba(14, 9, 5, 0.55) center / 22px no-repeat url("data:image/svg+xml;utf8,"); box-shadow: 0 0 0 1.5px #150f09, inset 0 0 6px #000; }
/* Painted icons (2026-10-22): status symbols, badges, the empty food places, the book button. */
.buff .sign.painted { background: center / contain no-repeat; }
.slot .badge.painted { background-size: contain; }
.food.empty.painted { background-size: 26px; background-color: rgba(14, 9, 5, 0.55); opacity: 0.4; filter: grayscale(0.6); }
.bookbtn.painted::before { width: 22px; height: 22px; margin-top: -11px; left: 7px; border: 0; box-shadow: none; background: var(--bk) center / contain no-repeat; }
/* Brokk's shop, bigger and easier to read (2026-10-22). */
.panel.shop { width: min(900px, 96vw); }
.shophead { display: flex; align-items: center; gap: 16px; }
.shophead h2 { margin: 0; flex: 1; }
.shoppurse { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid #7a5428; border-radius: 4px; background: rgba(12, 9, 6, 0.6); font-size: 15px; color: #d8ccb0; }
.shoppurse b { font: 700 22px var(--head); color: #ffd04a; }
.panel.shop .lead { font-size: 16px; margin: 8px 0 14px; }
.panel.shop h3 { font-size: 20px; margin: 0 0 8px; }
.shoplist { max-height: min(52vh, 460px); }
.shoprow { gap: 12px; padding: 8px 10px; cursor: default; }
.shoprow .ic { width: 52px; height: 52px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px #4a3420; }
.shopwords { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.shopwords b { font: 700 17px var(--head); color: #f3e4c0; line-height: 1.2; }
.shopwords small { font-size: 13px; color: #b8a888; margin-top: 2px; }
.shoprow.no .shopwords b { color: #a8987a; }
.shoprow button { flex: none; margin-left: 0; min-width: 118px; padding: 8px 12px; font-size: 15px; }
.shopleft { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #7fb04a; background: rgba(60, 90, 30, 0.18); font-size: 14px; color: #d8e8c0; }
.shopleft.done { border-left-color: #c8503a; background: rgba(120, 40, 30, 0.2); color: #f0c8b8; }
.shopnone { padding: 14px 10px; font-size: 14px; }
@media (max-width: 640px) { .panel.shop .cols { flex-direction: column; } .shoprow button { min-width: 96px; } }
/* The Equip tab (2026-10-22): six places, laid out as a body: head and chest, cape and pants, ring and trinket. */
.worn { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; margin: 10px 0 12px; }
.wornplace { display: flex; align-items: center; gap: 10px; }
.wornplace .slot { width: 64px; height: 64px; background-size: 52px; cursor: pointer; flex: none; }
.wornplace .slot.empty { opacity: 0.55; cursor: default; }
.wornname { font: 600 15px var(--head); color: #e8d2a2; }
#worn-stats { margin-bottom: 6px; color: #d8c49a; }
/* Pack / Special Items (2026-10-22). */
.packtabs { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; }
.packtabs button { padding: 4px 12px; font: 700 18px var(--head); font-variant: small-caps; letter-spacing: 0.06em; background: none; border: 1px solid transparent; color: #b8a27a; cursor: pointer; }
.packtabs button.on { color: #f6dc98; border-color: #7a5428; background: rgba(60, 40, 18, 0.6); }
.packtabs #weight { margin-left: 8px; }
.special { display: flex; flex-direction: column; gap: 10px; min-height: 216px; }
.specialcard { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #54402a; border-radius: 4px; background: rgba(14, 9, 5, 0.6); }
.specialcard.on { border-color: #c9a13a; box-shadow: inset 0 0 12px rgba(201, 161, 58, 0.25); }
.specialcard.not { opacity: 0.55; }
.specialcard .ic { width: 52px; height: 52px; flex: none; background: center / contain no-repeat; }
.specialwords { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.specialwords b { font: 700 17px var(--head); color: #f3e4c0; }
.specialwords small { font-size: 12.5px; color: #b8a888; }
.specialcard button { flex: none; min-width: 96px; }
/* Opening a danger zone's chest (2026-10-22). */
.channel { position: fixed; left: 50%; top: 70%; transform: translateX(-50%); width: 260px; text-align: center; pointer-events: none; z-index: 6; }
.channel span { display: block; font: 700 15px var(--head); color: #f3e4c0; text-shadow: 0 1px 2px #000, 0 0 6px #000; margin-bottom: 5px; }
.channel i { display: block; height: 8px; border: 1px solid #7a5428; background: rgba(0, 0, 0, 0.6); border-radius: 4px; overflow: hidden; }
.channel u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9a13a, #ffd86a); }