html, body { margin: 0; height: 100%; background: #000; overflow: hidden; font-family: Arial, Helvetica, sans-serif; user-select: none; -webkit-user-select: none; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#client { position: relative; width: 765px; height: 503px; flex: none; background-color: #4a4136; background-size: 256px; transform-origin: center center; }
.inset { box-shadow: 0 0 0 1px #000, 0 0 0 3px #2a241c, 0 0 0 4px #857a66; }

/* ---------- game viewport ---------- */
#viewport { position: absolute; left: 8px; top: 8px; width: 512px; height: 334px; overflow: hidden; background: #000; }
#gl { width: 512px; height: 334px; display: block; }
#hover { position: absolute; left: 4px; top: 2px; color: #fff; font: bold 13px Arial; text-shadow: 1px 1px 0 #000; pointer-events: none; white-space: nowrap; }
#overheads { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* overhead chat: a long message wraps into a short centred block instead of running out of the view */
.oh { position: absolute; transform: translate(-50%, -100%); font: bold 13px/14px Arial; text-shadow: 1px 1px 0 #000; width: max-content; max-width: 230px; text-align: center; overflow-wrap: anywhere; }
.cross { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; animation: cross .45s steps(4) forwards; }
.cross::before, .cross::after { content: ''; position: absolute; left: 6px; top: -1px; width: 3px; height: 16px; background: currentColor; box-shadow: 0 0 0 1px #000; }
.cross::before { transform: rotate(45deg); } .cross::after { transform: rotate(-45deg); }
@keyframes cross { from { transform: scale(1.2); opacity: 1 } to { transform: scale(.4); opacity: .2 } }
#loading { position: absolute; inset: 0; background: #000; color: #fff; font: bold 14px Arial; display: flex; align-items: center; justify-content: center; }

/* ---------- minimap ---------- */
#mapframe { position: absolute; left: 560px; top: 6px; width: 196px; height: 158px; }
#minimap { position: absolute; left: 34px; top: 3px; width: 152px; height: 152px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px #000, 0 0 0 5px #6d6252, 0 0 0 6px #1e1810; }
#compass { position: absolute; left: 2px; top: 2px; width: 36px; height: 36px; cursor: pointer; }

/* ---------- side tabs ---------- */
#tabstop { position: absolute; left: 556px; top: 168px; width: 204px; height: 34px; display: flex; gap: 2px; }
.tab { flex: 1; background: linear-gradient(#716450, #4a3f30); border: 1px solid #1e1810; border-bottom: none; border-radius: 7px 7px 0 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tab img { width: 26px; height: 26px; image-rendering: pixelated; }
.tab.active { background: linear-gradient(#8b3322, #5a1c10); }
#panel { position: absolute; left: 556px; top: 203px; width: 204px; height: 262px; background: #3e3529; overflow: hidden; color: #ff981f; font: bold 12px Arial; }
#tabsbot { position: absolute; left: 556px; top: 471px; width: 204px; height: 28px; display: flex; gap: 4px; }
.bbtn { flex: 1; display: flex; align-items: center; justify-content: center; color: #ff981f; font: bold 12px Arial; text-shadow: 1px 1px #000; background: linear-gradient(#5a4e3e, #3a3024); border: 1px solid #1e1810; border-radius: 4px; cursor: pointer; }
.bbtn:hover { color: #fff; }

/* inventory */
.inv { display: grid; grid-template-columns: repeat(4, 42px); gap: 0 5px; justify-content: center; padding-top: 4px; }
.slot { width: 42px; height: 36px; position: relative; cursor: pointer; }
.slot img { width: 36px; height: 32px; position: absolute; left: 3px; top: 2px; pointer-events: none; }
.slot.sel img { filter: brightness(1.6) drop-shadow(0 0 1px #fff); }
.qty { position: absolute; left: 1px; top: -1px; color: #ff0; font: bold 11px Arial; text-shadow: 1px 1px #000; pointer-events: none; }

/* skills */
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 8px 6px 4px; }
.sk { display: flex; align-items: center; justify-content: space-between; background: #4d4333; border: 1px solid #1e1810; box-shadow: inset 1px 1px #6a5d48; height: 34px; padding: 0 6px 0 3px; cursor: default; }
.sk img { width: 28px; height: 28px; }
.sk .lv { color: #ff0; font: bold 13px Arial; text-shadow: 1px 1px #000; text-align: right; line-height: 13px; }
.totals { margin: 6px; padding: 6px; background: #000; border: 1px solid #5a4e3e; color: #ff0; font: bold 12px Arial; display: flex; justify-content: space-between; }
.phead { color: #ff981f; font: bold 13px Arial; text-shadow: 1px 1px #000; text-align: center; padding: 6px 0 4px; }
.qline { padding: 3px 10px; cursor: pointer; text-shadow: 1px 1px #000; font: bold 12px Arial; }
.qline:hover { text-decoration: underline; }
.worn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px; }
.wslot { width: 40px; height: 38px; background: #2e271e; border: 1px solid #6a5d48; position: relative; cursor: pointer; }
.wslot img { position: absolute; left: 2px; top: 3px; }
.wlabel { color: #ff981f; font: 11px Arial; text-shadow: 1px 1px #000; }
.opt { margin: 6px 10px; padding: 6px; text-align: center; background: #4d4333; border: 1px solid #1e1810; cursor: pointer; color: #ff981f; text-shadow: 1px 1px #000; }
.opt:hover { color: #fff; }
.help { color: #d8c8a8; font: 11px Arial; padding: 4px 10px; line-height: 14px; text-shadow: 1px 1px #000; }

/* ---------- chat ---------- */
#chat { position: absolute; left: 8px; top: 352px; width: 512px; height: 112px; background: #d7c9a2; background-size: 256px; }
#chatlog { position: absolute; left: 8px; top: 4px; right: 8px; bottom: 22px; overflow-y: auto; font: 14px/15px 'IM Fell English', Georgia, serif; color: #000; overflow-wrap: anywhere; word-break: break-word; }
#chatlog::-webkit-scrollbar { width: 12px; background: #b8a67e; }
#chatlog::-webkit-scrollbar-thumb { background: #6d5a3a; border: 1px solid #3a2e1e; }
/* the line being typed wraps onto up to three lines instead of running off the edge (ui.renderChatLine makes room above) */
#chatinput { position: absolute; left: 8px; right: 8px; bottom: 2px; min-height: 17px; max-height: 51px; border-top: 1px solid #8a7a5a; font: 14px/17px 'IM Fell English', Georgia, serif; color: #000; white-space: normal; overflow-wrap: anywhere; word-break: break-word; overflow: hidden; }
#chatinput b { color: #0000c0; font-weight: normal; }
#dialogue { position: absolute; inset: 0; display: none; cursor: pointer; }
#chathead { position: absolute; top: 12px; width: 88px; height: 88px; }
#dialogue.left #chathead { left: 12px; } #dialogue.right #chathead { right: 12px; }
#dialogue.info #chathead, #dialogue.opts #chathead { display: none; }
.dname { position: absolute; top: 12px; left: 110px; right: 110px; text-align: center; color: #800000; font: 15px 'IM Fell English', Georgia, serif; }
.dtext { position: absolute; top: 32px; left: 110px; right: 110px; text-align: center; font: 14px/16px 'IM Fell English', Georgia, serif; color: #000; }
.dcont { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; color: #0000c0; font: 14px 'IM Fell English', Georgia, serif; }
.dcont:hover { color: #fff; text-shadow: 1px 1px #000; }
/* the words sit beside the face that says them, the way the old games did, so a long speech has room */
#dialogue.left .dname, #dialogue.left .dtext { left: 110px; right: 26px; } #dialogue.right .dname, #dialogue.right .dtext { left: 26px; right: 110px; }
#dialogue .dtext.long { font-size: 13px; line-height: 14px; } #dialogue .dtext.longer { font-size: 12px; line-height: 13px; }
#dialogue.info .dname, #dialogue.opts .dname { left: 20px; right: 20px; }
#dialogue.info .dtext { left: 60px; right: 60px; top: 30px; }
.dinfoimg { position: absolute; left: 14px; top: 34px; }
.dopts { position: absolute; top: 30px; left: 0; right: 0; display: none; text-align: center; }
#dialogue.opts .dopts { display: block; } #dialogue.opts .dcont, #dialogue.opts .dtext { display: none; }
.dopts div { font: 15px/19px 'IM Fell English', Georgia, serif; color: #000; cursor: pointer; }
.dopts div:hover { color: #fff; text-shadow: 1px 1px #000; }
/* a conversation that has to be finished (the newcomer's welcome): "Click here to continue" becomes a little
   parchment button that glows, with a gold pointer either side, and presses in when the box is clicked */
#dialogue.held .dcont { left: 50%; right: auto; bottom: 4px; transform: translateX(-50%); white-space: nowrap; padding: 0 12px 1px; line-height: 17px;
  background: linear-gradient(#fbf1d2, #e2cc94); border: 1px solid #4a3418; border-radius: 3px; animation: heldglow 1.1s ease-in-out infinite; }
#dialogue.held .dcont::before, #dialogue.held .dcont::after { position: absolute; top: 0; font: bold 13px/17px Arial, sans-serif; color: #ffe45a;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
#dialogue.held .dcont::before { content: '\25B6'; right: 100%; margin-right: 6px; animation: heldpoint 0.7s ease-in-out infinite; }
#dialogue.held .dcont::after { content: '\25C0'; left: 100%; margin-left: 6px; animation: heldpoint 0.7s ease-in-out -0.35s infinite; }
#dialogue.held .dcont:hover { color: #fff; text-shadow: 1px 1px #000; background: linear-gradient(#e6d096, #c4a258); }
#dialogue.held:active .dcont { transform: translateX(-50%) translateY(1px); background: linear-gradient(#e2cc94, #fbf1d2); }
#dialogue.held .dtext { top: 29px; }
#dialogue.held.opts .dopts div { display: table; margin: 0 auto; padding: 0 12px; border-radius: 3px; animation: heldglow2 1.1s ease-in-out infinite; }
@keyframes heldglow { 0%, 100% { box-shadow: inset 1px 1px 0 #fffbe8, inset -1px -1px 0 #b0924e, 0 0 0 1px rgba(255,214,80,0.5), 0 0 5px 1px rgba(255,200,50,0.4); }
  50% { box-shadow: inset 1px 1px 0 #fffbe8, inset -1px -1px 0 #b0924e, 0 0 0 2px #ffe45a, 0 0 11px 3px rgba(255,214,60,0.9); } }
@keyframes heldglow2 { 0%, 100% { box-shadow: 0 0 0 1px rgba(122,90,34,0.45); } 50% { box-shadow: 0 0 0 1px #c89a30, 0 0 8px 2px rgba(255,214,60,0.75); } }
@keyframes heldpoint { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
/* clicking the world while it is held: the box shakes its head, "not yet" */
@keyframes dlgnudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
#dialogue.nudge { animation: dlgnudge 0.32s ease-out; }
#chatbtns { position: absolute; left: 8px; top: 470px; width: 512px; height: 30px; display: flex; gap: 6px; }
.cb { flex: 1; text-align: center; color: #fff; font: bold 11px Arial; text-shadow: 1px 1px #000; background: linear-gradient(#5a4e3e, #3a3024); border: 1px solid #1e1810; border-radius: 4px; padding-top: 2px; }
.cb span { display: block; color: #0f0; }

/* ---------- menu / tooltip ---------- */
#menu { position: absolute; display: none; background: #5d5447; border: 1px solid #000; font: bold 13px Arial; color: #fff; z-index: 50; min-width: 110px; padding: 0 0 2px; }
#menu .mt { background: #000; color: #5d5447; padding: 1px 3px; margin-bottom: 2px; }
#menu .mo { padding: 1px 4px; cursor: pointer; text-shadow: 1px 1px #000; white-space: nowrap; }
#menu .mo:hover { color: #ff0; }
#tooltip { position: absolute; display: none; background: #ffffa0; border: 1px solid #000; color: #000; font: 11px Arial; padding: 2px 4px; z-index: 60; pointer-events: none; white-space: nowrap; }

/* ---------- windows inside viewport ---------- */
.win { position: absolute; display: none; background: #3e3529; border: 2px solid #1e1810; box-shadow: inset 0 0 0 1px #6a5d48, 0 4px 12px #000a; color: #ff981f; font: bold 12px Arial; text-shadow: 1px 1px #000; z-index: 20; }
.win .wt { text-align: center; padding: 6px; font-size: 14px; border-bottom: 1px solid #1e1810; }
.win .x { position: absolute; right: 6px; top: 4px; cursor: pointer; color: #ff981f; font-size: 15px; }
.win .x:hover { color: #fff; }
#smithwin { left: 56px; top: 30px; width: 400px; }
.sgrid { display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px; gap: 6px; }
.sitem { text-align: center; padding: 4px 2px; background: #2e271e; border: 1px solid #1e1810; cursor: pointer; font: 11px Arial; }
.sitem:hover { background: #4d4333; }
.sitem .n { color: #fff; } .sitem .ok { color: #0f0; } .sitem .no { color: #f33; }
.shint { padding: 0 8px 8px; font: 11px Arial; color: #c8b890; text-align: center; }

#design { left: 8px; top: 8px; width: 230px; bottom: 8px; }
.drow { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; }
.drow .arr { width: 20px; height: 18px; background: #5a4e3e; border: 1px solid #1e1810; text-align: center; cursor: pointer; line-height: 17px; }
.drow .arr:hover { color: #fff; }
.drow .val { flex: 1; text-align: center; color: #fff; }
.drow input { width: 120px; background: #2e271e; color: #ff0; border: 1px solid #6a5d48; font: bold 12px Arial; padding: 2px 4px; }
.dbtn { margin: 10px auto 0; width: 120px; padding: 6px; text-align: center; background: linear-gradient(#716450, #4a3f30); border: 1px solid #1e1810; cursor: pointer; }
.dbtn:hover { color: #fff; }

.scroll { position: absolute; display: none; left: 86px; top: 16px; width: 340px; bottom: 16px; background: #e2d2a4; color: #2a1a08; border: 2px solid #5a3e1e; box-shadow: 0 0 0 3px #b8995e, 0 6px 16px #000c; font: 15px/18px 'IM Fell English', Georgia, serif; z-index: 30; overflow-y: auto; padding: 14px 22px; box-sizing: border-box; }
.scroll h2 { font: 20px 'IM Fell English', Georgia, serif; text-align: center; margin: 0 0 8px; color: #800000; }
.scroll .done { text-decoration: line-through; color: #6a5a40; }
.scroll .hl { color: #800000; }
.scroll .close { text-align: center; margin-top: 10px; color: #0000c0; cursor: pointer; }
.scroll .close:hover { text-decoration: underline; }

#levelup { position: absolute; left: 0; right: 0; top: 60px; text-align: center; pointer-events: none; display: none; z-index: 25; }
#levelup .lvbox { display: inline-block; padding: 8px 18px; background: #000c; border: 1px solid #ff981f; color: #ff981f; font: bold 14px Arial; text-shadow: 1px 1px #000; }
#levelup .lvbox b { color: #ff0; }
.spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; animation: spark 1.1s ease-out forwards; }
@keyframes spark { from { transform: translate(0,0); opacity: 1 } to { transform: translate(var(--dx), var(--dy)); opacity: 0 } }

/* ================= art pass: cohesive carved-stone interface ================= */
:root { --stone: none; --gold: #b8913a; --gold-dk: #6a5020; }
.inset { box-shadow: 0 0 0 1px #000, 0 0 0 3px #3a3024, 0 0 0 4px #1a140e, 0 0 0 5px #7d6e56, 0 0 0 6px #000; }
#panel, .tab, .bbtn, .cb, .win, .sk, .opt, .totals {
  background-image: var(--stone); background-size: 256px; background-blend-mode: multiply;
}
#panel { background-color: #6a5a46; box-shadow: 0 0 0 1px #000, 0 0 0 3px #3a3024, 0 0 0 4px #7d6e56, inset 0 0 18px #000c; }
.tab { background-color: #8a7658; border: 1px solid #120e0a; box-shadow: inset 1px 1px 0 #a8946e, inset -1px 0 0 #3a3024; }
.tab:hover { filter: brightness(1.12); }
.tab.active { background-color: #9a3a22; border-color: var(--gold-dk); box-shadow: inset 0 0 0 1px var(--gold), inset 0 2px 6px #0008; }
.bbtn, .cb { background-color: #7a6850; border: 1px solid #120e0a; box-shadow: inset 1px 1px 0 #a8946e, inset -1px -1px 0 #2a2218; }
.bbtn:active, .cb:active { box-shadow: inset 1px 1px 3px #000; }
.sk { background-color: #7e6c52; border: 1px solid #120e0a; box-shadow: inset 1px 1px 0 #a8946e, inset -1px -1px 0 #2a2218; }
.sk:hover { filter: brightness(1.15); }
.totals { background-color: #222; border: 1px solid #120e0a; box-shadow: inset 0 0 0 1px var(--gold-dk); }
.phead { color: #ff981f; letter-spacing: .5px; border-bottom: 1px solid #1e1810; box-shadow: 0 1px 0 #6a5d48; margin: 0 8px 4px; }
.slot:hover img { filter: brightness(1.25); }
#minimap { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold-dk), 0 0 0 7px #6d6252, 0 0 0 8px #000, 4px 6px 10px #000a; }
#compass { filter: drop-shadow(1px 2px 1px #000a); }
.win { background-color: #6a5a46; border: 2px solid #120e0a; box-shadow: inset 0 0 0 1px var(--gold-dk), inset 0 0 0 2px #7d6e56, 0 6px 16px #000c; }
.win .wt { color: #ff981f; border-bottom: 1px solid #120e0a; box-shadow: 0 1px 0 #7d6e56; }
.sitem { background: #2a2219cc; }
.opt { background-color: #7e6c52; box-shadow: inset 1px 1px 0 #a8946e, inset -1px -1px 0 #2a2218; }
#chat { box-shadow: 0 0 0 1px #000, 0 0 0 3px #5a4228, 0 0 0 4px #1a140e, 0 0 0 5px #7d6e56, 0 0 0 6px #000, inset 0 0 20px #7a5a2a55; }
#hover { font: bold 13px Arial; text-shadow: 1px 1px 0 #000, 0 0 2px #000; }
#menu { background: #5d5447; box-shadow: 0 0 0 1px #000, 3px 3px 6px #0009; }

/* ================= combat & map ================= */
.hit { position: absolute; width: 22px; height: 20px; margin: -10px 0 0 -11px; color: #fff; font: bold 12px/20px Arial; text-align: center; text-shadow: 1px 1px #000;
  clip-path: polygon(50% 0, 64% 20%, 92% 10%, 82% 40%, 100% 55%, 78% 70%, 86% 100%, 55% 84%, 30% 100%, 26% 72%, 0 62%, 20% 42%, 8% 12%, 36% 20%); }
.hit.red { background: #c41a10; } .hit.blue { background: #2a4ab8; }
.hpbar { position: absolute; width: 30px; height: 5px; margin: 0 0 0 -15px; background: #c41a10; border: 1px solid #000; }
.hpbar i { display: block; height: 100%; background: #20d020; }
#hpbox { position: absolute; left: 0; top: 118px; width: 40px; text-align: center; color: #ff0; font: bold 11px Arial; text-shadow: 1px 1px #000; }
#hpbox img { display: block; width: 22px; height: 22px; margin: 0 auto -2px; }
#tabsbot .bbtn { font-size: 11px; }
.totals span { font-size: 11px; }
#zonebanner { position: absolute; top: 26px; left: 0; right: 0; text-align: center; font: 22px 'IM Fell English', Georgia, serif; color: #ffe890; text-shadow: 2px 2px 0 #000, 0 0 8px #000; pointer-events: none; opacity: 0; }
#zonebanner.show { animation: zone 3.2s ease forwards; }
@keyframes zone { 0% { opacity: 0; transform: translateY(-6px) } 15% { opacity: 1; transform: none } 75% { opacity: 1 } 100% { opacity: 0 } }
.scroll.wide { left: 8px; right: 8px; width: auto; top: 6px; bottom: 6px; padding: 6px 8px; text-align: center; }
.scroll.wide h2 { margin: 0 0 2px; font-size: 16px; }
#wmap { border: 2px solid #5a3e1e; }
.scroll.wide .close { margin-top: 2px; }

/* ================= 2001 render feel ================= */
#gl, #chathead { image-rendering: pixelated; image-rendering: crisp-edges; }

table.guide { width: 100%; border-collapse: collapse; margin: 6px 0; font: 14px 'IM Fell English', Georgia, serif; }
table.guide th { text-align: left; border-bottom: 1px solid #8a6a3a; color: #800000; }
table.guide td { padding: 1px 4px; border-bottom: 1px dotted #b8995e; }
table.guide td:first-child { width: 44px; text-align: center; color: #5a3a10; }
table.guide tr.done-row td { color: #2a6a1a; }
.sgrid.shop { grid-template-columns: repeat(4, 1fr); }
.sgrid.sell { grid-template-columns: repeat(7, 1fr); max-height: 118px; overflow-y: auto; }
.sgrid.sell .sitem img { width: 30px; height: 27px; }
#smithwin { max-height: 318px; overflow-y: auto; }

.rtabs { display: flex; gap: 3px; padding: 5px 8px 0; flex-wrap: wrap; }
.rtab { padding: 2px 8px; background: #2e271e; border: 1px solid #1e1810; cursor: pointer; font: bold 11px Arial; color: #c8b890; }
.rtab.on { background: #8b3322; color: #ffcf6a; border-color: #6a5020; }
.sitem.dim { opacity: 0.55; }
.wgrid { display: grid; grid-template-columns: repeat(3, 56px); justify-content: center; gap: 6px 8px; padding-top: 8px; }
.wcell { display: flex; flex-direction: column; align-items: center; }
.wstats { margin: 12px 10px 0; padding: 6px; background: #2a2219; border: 1px solid #120e0a; color: #ff981f; font: 11px Arial; line-height: 15px; text-shadow: 1px 1px #000; }

/* =====================================================================================
   AUTHORED UI. The chrome is image assets generated by js/ui_assets.js (masonry frame,
   recesses, parchment, plaques, wooden buttons, nine-slice frames). The rules below only
   position those images and switch states; they deliberately avoid CSS-drawn "stone".
   ===================================================================================== */
#client { background-size: 765px 503px; image-rendering: pixelated; font: bold 11px Tahoma, Verdana, Arial, sans-serif; }
.inset, #panel, #chat, #minimap, #compass { box-shadow: none !important; }
#panel { background: none; background-size: 204px 262px; image-rendering: pixelated; color: #ff981f; font: bold 11px Tahoma, Verdana, sans-serif; }
#chat { background: none !important; }
#chatlog { font-size: 13px; line-height: 14px; }
#chatinput { border-top: 1px solid rgba(90, 60, 25, 0.45); }
#minimap { box-shadow: none; }
#tabstop { gap: 1px; left: 557px; }
.tab, .tab.active, .tab:hover { background: var(--pn) center / 100% 100% no-repeat; border: none; border-radius: 0; box-shadow: none; filter: none; width: 38px; height: 34px; flex: none; image-rendering: pixelated; }
.tab:hover { background-image: var(--ph); }
.tab.active { background-image: var(--po); }
.tab img { width: 20px; height: 20px; margin-top: 2px; filter: drop-shadow(1px 1px 0 #000); }
.bbtn, .cb, .opt { background: var(--bn) center / 100% 100% no-repeat !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; image-rendering: pixelated;
  color: #f0d8a0; text-shadow: 1px 1px 0 #000; font: bold 11px Tahoma, Verdana, sans-serif; filter: none !important; }
.bbtn:hover, .cb:hover, .opt:hover { background-image: var(--bh) !important; color: #fff2c8; }
.bbtn:active, .cb:active, .opt:active { background-image: var(--bp) !important; padding-top: 1px; }
.cb { padding-top: 3px; } .cb span { color: #7ae040; }
.opt { margin: 5px 10px; padding: 5px 0; }
.phead { font: bold 11px Tahoma, Verdana, sans-serif; color: #ff981f; border: none; box-shadow: none; padding: 5px 0 3px; margin: 0; letter-spacing: 0; }
.help { color: #c8b890; font: 11px Tahoma, Verdana, sans-serif; }
/* skills: icons and numbers set straight into the carved panel */
.skills2 { position: absolute; left: 6px; top: 10px; width: 192px; display: grid; grid-template-columns: 96px 96px; grid-auto-rows: 48px; }
.sk2 { position: relative; cursor: pointer; }
.sk2 img { position: absolute; left: 8px; top: 7px; width: 30px; height: 30px; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 #000); }
.sk2 .cur, .sk2 .max { position: absolute; color: #ffff00; font: bold 12px Tahoma, Verdana, sans-serif; text-shadow: 1px 1px 0 #000; }
.sk2 .cur { left: 46px; top: 8px; } .sk2 .max { left: 64px; top: 22px; }
.sk2 .sl { position: absolute; left: 58px; top: 12px; width: 2px; height: 22px; background: #d8b040; transform: rotate(28deg); box-shadow: 1px 1px 0 #000; }
.sk2:hover { background: radial-gradient(ellipse at 40% 50%, rgba(255, 210, 120, 0.12), transparent 70%); }
.plaque { position: absolute; left: 12px; top: 221px; width: 180px; height: 26px; display: flex; justify-content: space-around; align-items: center; color: #d8b870; font: bold 10px Tahoma, Verdana, sans-serif; text-shadow: 1px 1px 0 #000; }
.plaque b { color: #ffff00; font-size: 12px; }
/* inventory: items sit in the worn hollows of the backing */
.inv { gap: 0 5px; padding-top: 4px; }
.slot:hover img { filter: brightness(1.2) drop-shadow(0 0 1px #000); }
.slot img { filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6)); image-rendering: pixelated; }
/* "Use": the chosen item is lifted out of its hollow and held up, the hollow rimmed in breathing bronze;
   the pointer carries a little copy of it (ui.useCursor), and any other slot you point at is rimmed as a target */
.slot.sel { border-radius: 4px; background: radial-gradient(ellipse at 50% 64%, rgba(24,14,4,0.62), rgba(24,14,4,0.18) 74%); animation: usebreath 1.6s ease-in-out infinite; }
.slot.sel img, .slot.sel:hover img { transform: translate(-1px, -4px) rotate(-8deg); filter: drop-shadow(2px 5px 1px rgba(0,0,0,0.62)) brightness(1.14); }
@keyframes usebreath { 0%, 100% { box-shadow: inset 0 0 0 1px #1e1206, inset 0 0 0 2px #a8822e, 0 0 2px rgba(255,210,90,0.25); }
  50% { box-shadow: inset 0 0 0 1px #1e1206, inset 0 0 0 2px #ecc862, 0 0 7px rgba(255,214,90,0.65); } }
html.using .slot:not(.sel):not(:empty):hover { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(236,200,98,0.85); }
html.using:not(.touch) #gl, html.using:not(.touch) #panel .slot, html.using:not(.touch) #minimap { cursor: var(--use-cursor, pointer); }
/* on a touch screen there is no pointer and no top line, so a small tag says what you are holding */
#usetag { display: none; }
html.touch #usetag:not([hidden]) { display: block; position: absolute; left: calc(env(safe-area-inset-left, 0px) + 8px); top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 24; pointer-events: none; white-space: nowrap;
  padding: 2px 10px 3px 6px; background: linear-gradient(#f4e8c4, #e0cc98); border: 1px solid #3a2a10; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1px #c8a040;
  font: 13px/18px 'IM Fell English', Georgia, serif; color: #1e1406; }
#usetag img { width: 22px; height: 20px; vertical-align: -5px; margin-right: 4px; image-rendering: pixelated; }
#usetag b { color: #7a3a08; font-weight: normal; } #usetag span { color: #6a5a3a; font-size: 11px; }
/* equipment sockets */
.wslot { width: 42px; height: 40px; background: var(--ui-socket) center / 100% 100% no-repeat; border: none; image-rendering: pixelated; }
.wslot img { left: 3px; top: 4px; }
.wlabel { color: #c8a868; font: 10px Tahoma, Verdana, sans-serif; }
.wstats { background: rgba(0, 0, 0, 0.3); border: none; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.6), inset -1px -1px 0 rgba(255,228,190,0.08); font: 10px Tahoma, Verdana, sans-serif; }
.qline { font: bold 11px Tahoma, Verdana, sans-serif; padding: 2px 10px; }
/* windows: nine-slice carved stone around a recessed dark interior */
.win { border: 16px solid transparent; border-image: var(--ui-frame) 16 / 16px round; background: var(--ui-panel) repeat; background-clip: padding-box; box-shadow: 0 6px 12px rgba(0,0,0,0.6); image-rendering: pixelated; }
.win .wt { font: bold 12px Tahoma, Verdana, sans-serif; border: none; box-shadow: none; padding: 2px 4px 6px; }
.win .x { right: 2px; top: 0; }
#smithwin { left: 40px; top: 18px; width: 400px; }
.sitem { background: rgba(0, 0, 0, 0.28); border: none; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.7), inset -1px -1px 0 rgba(255,228,190,0.08); font: 10px Tahoma, Verdana, sans-serif; }
.sitem:hover { background: rgba(255, 200, 120, 0.08); }
.rtab { background: rgba(0,0,0,0.35); border: none; box-shadow: inset 1px 1px 0 rgba(255,228,190,0.1), inset -1px -1px 0 rgba(0,0,0,0.6); font: bold 10px Tahoma, Verdana, sans-serif; }
.rtab.on { background: rgba(140, 60, 30, 0.7); color: #ffd890; }
/* scrolls and journals: parchment nine-slice */
.scroll { border: 14px solid transparent; border-image: var(--ui-parch-frame) 14 / 14px round; background: var(--ui-parch) repeat; background-clip: padding-box; box-shadow: 0 6px 14px rgba(0,0,0,0.65); padding: 6px 12px; }
.scroll h2 { font-size: 17px; margin-bottom: 4px; }
#menu { background: #5d5447; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,0.5); font: bold 12px Tahoma, Verdana, sans-serif; }
#tooltip { background: #ffffa0; border: 1px solid #000; font: 11px Tahoma, Verdana, sans-serif; box-shadow: none; }
#hpbox { top: 124px; left: 1px; width: 38px; font: bold 10px Tahoma, Verdana, sans-serif; }
#hpbox img { width: 18px; height: 18px; margin-bottom: -1px; }

#qdemo { position: absolute; right: 6px; top: 6px; width: 232px; padding: 6px 8px; z-index: 40; background: var(--ui-parch) repeat; border: 10px solid transparent; border-image: var(--ui-parch-frame) 14 / 10px round; background-clip: padding-box;
  font: 11px Tahoma, Verdana, sans-serif; color: #2a1a08; box-shadow: 0 4px 10px rgba(0,0,0,0.6); }
#qdemo .qd-h { font-weight: bold; color: #800000; margin-bottom: 4px; } #qdemo .qd-x { float: right; cursor: pointer; }
#qdemo .qd-s { padding: 1px 0; } #qdemo .qd-s.d { text-decoration: line-through; color: #7a6a50; } #qdemo .qd-s.c { color: #000; font-weight: bold; }
#qdemo .qd-b { margin-top: 5px; display: flex; gap: 8px; } #qdemo .qd-b span { cursor: pointer; color: #0000a0; text-decoration: underline; }
.wgrid { gap: 2px 8px; padding-top: 4px; } .wstats { margin-top: 6px; }

/* ---------- the Treasury of Kalliste (bank) ---------- */
#bankwin { position: absolute; display: none; left: 2px; top: 2px; width: 492px; height: 314px; z-index: 22;
  border: 8px solid transparent; border-image: var(--ui-frame) 16 / 8px round; background: #1c1610 var(--ui-panel) repeat; background-clip: padding-box;
  box-shadow: 0 6px 14px rgba(0,0,0,0.7); color: #ff981f; font: bold 11px Tahoma, Verdana, sans-serif; text-shadow: 1px 1px #000; }
#bankwin .bk-head { position: relative; height: 46px; border-bottom: 2px solid #120e0a; }
#bankwin .bk-head canvas { display: block; width: 492px; height: 46px; image-rendering: pixelated; }
#bankwin .x { position: absolute; right: 4px; top: 2px; cursor: pointer; color: #6a1a14; font-size: 15px; text-shadow: 0 1px #fff8; }
#bankwin .x:hover { color: #000; }
#bankwin .bk-grid { height: 226px; overflow-y: auto; padding: 4px 6px; display: grid; grid-template-columns: repeat(10, 44px); grid-auto-rows: 36px; gap: 2px 3px; align-content: start;
  background: linear-gradient(#0000, #0000), repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 47px); box-shadow: inset 0 2px 6px #000c; }
#bankwin .bk-grid::-webkit-scrollbar { width: 14px; } #bankwin .bk-grid::-webkit-scrollbar-track { background: #2a2016; border-left: 1px solid #000; }
#bankwin .bk-grid::-webkit-scrollbar-thumb { background: #6a5a46; border: 1px solid #000; box-shadow: inset 1px 1px #8a7a5e; }
#bankwin .bk-slot { position: relative; cursor: pointer; }
#bankwin .bk-slot img { width: 36px; height: 32px; margin: 2px 4px 0; image-rendering: pixelated; }
#bankwin .bk-slot:hover { background: rgba(255,230,160,0.12); }
#bankwin .bk-slot .qty { position: absolute; left: 1px; top: -1px; font: 11px Tahoma, Verdana, sans-serif; text-shadow: 1px 1px #000; }
#bankwin .bk-empty { grid-column: 1 / -1; text-align: center; margin-top: 90px; color: #c8b890; font-weight: normal; }
#bankwin .bk-foot { height: 26px; display: flex; align-items: center; gap: 4px; padding: 3px 6px 0; border-top: 1px solid #6a5d48; }
#bankwin .bk-lbl { color: #c8b890; margin-right: 2px; }
#bankwin .bk-q, #bankwin .bk-btn { cursor: pointer; padding: 3px 7px; background: #4a3e2e; border: 1px solid #120e0a; box-shadow: inset 1px 1px #7d6e56, inset -1px -1px #2a2016; color: #ff981f; }
#bankwin .bk-q { min-width: 16px; text-align: center; }
#bankwin .bk-q.on { background: #6a1a14; color: #ffd860; box-shadow: inset 1px 1px #000, inset -1px -1px #9a3a2a; }
#bankwin .bk-q:hover, #bankwin .bk-btn:hover { color: #fff; }
#bankwin .bk-btn:first-of-type { margin-left: 8px; }
#bankwin .bk-cnt { margin-left: auto; color: #ffd860; }

/* ---------- the guide: a soft pale-cyan edge on whatever should be clicked next ---------- */
@keyframes tutpulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(189,240,255,0.55), 0 0 5px 1px rgba(160,230,255,0.35); } 50% { box-shadow: 0 0 0 1px rgba(189,240,255,0.95), 0 0 9px 2px rgba(160,230,255,0.6); } }
.tut-hl { animation: tutpulse 1.9s ease-in-out infinite; border-radius: 3px; position: relative; z-index: 2; }
.tab.tut-hl { outline: 1px solid rgba(189,240,255,0.8); outline-offset: -2px; }

/* ---------- the tutorial: a constant task line, a bright arrow, and louder highlights ---------- */
#tut-banner { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 452px; z-index: 25; pointer-events: none;
  background: linear-gradient(#f4e8c4, #e2cf9c); border: 2px solid #3a2a10; box-shadow: 0 0 0 1px #c8a040 inset, 0 3px 10px rgba(0,0,0,0.6);
  font: bold 13px/17px Tahoma, Verdana, sans-serif; color: #1e1406; padding: 5px 10px 6px; text-align: center; }
#tut-banner .tut-step { display: block; font: bold 10px Tahoma, sans-serif; color: #6a1a14; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1px; }
#tut-banner b.k { color: #0a5a8a; background: rgba(160,225,255,0.45); padding: 0 3px; border-radius: 2px; }
#tut-banner.tut-new { animation: tutnew 0.7s ease-out; }
@keyframes tutnew { 0% { transform: translateX(-50%) scale(1.06); box-shadow: 0 0 0 3px #7fd8ff, 0 3px 10px rgba(0,0,0,0.6); } 100% { transform: translateX(-50%) scale(1); } }
#tut-arrow { position: absolute; z-index: 60; width: 18px; text-align: center; font: bold 22px Arial, sans-serif; color: #ffe45a; pointer-events: none;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 0 0 10px #ffd000; }
@keyframes tutpulse2 { 0%, 100% { box-shadow: 0 0 0 2px #ffe45a, 0 0 10px 3px rgba(255,220,60,0.8); } 50% { box-shadow: 0 0 0 3px #fff6b0, 0 0 18px 6px rgba(255,230,90,1); } }
.tut-hl { animation: tutpulse2 0.9s ease-in-out infinite !important; border-radius: 4px; position: relative; z-index: 3; }
.tab.tut-hl { outline: 2px solid #ffe45a; outline-offset: -2px; filter: brightness(1.35); }

/* ---------- multiplayer: name tags, trading ---------- */
.nametag { position: absolute; transform: translate(-50%, -100%); font: bold 11px Tahoma, Verdana, sans-serif; color: #ffffff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; white-space: nowrap; pointer-events: none; }
.nametag.admin { color: #ffd84a; }
#chatlog img.crown { width: 11px; height: 9px; vertical-align: 0; margin-right: 2px; }
#tradewin { position: absolute; display: none; left: 26px; top: 20px; width: 460px; z-index: 23; border: 8px solid transparent; border-image: var(--ui-frame) 16 / 8px round; background: #1c1610 var(--ui-panel) repeat; background-clip: padding-box; box-shadow: 0 6px 14px rgba(0,0,0,0.7); color: #ff981f; font: bold 11px Tahoma, Verdana, sans-serif; text-shadow: 1px 1px #000; padding: 6px 8px 8px; }
#tradewin .tr-head { text-align: center; font-size: 13px; margin-bottom: 6px; color: #ffe0a0; }
#tradewin .tr-warn { color: #ff6040; }
#tradewin .tr-cols { display: flex; gap: 8px; }
#tradewin .tr-col { flex: 1; background: rgba(0,0,0,0.35); border: 1px solid #120e0a; box-shadow: inset 1px 1px #6a5d48; padding: 4px; min-height: 150px; }
#tradewin .tr-t { text-align: center; margin-bottom: 4px; } #tradewin .tr-t span { color: #c8b890; font-weight: normal; }
#tradewin .tr-it { position: relative; display: flex; align-items: center; gap: 6px; padding: 2px 4px; cursor: default; }
#tradewin .tr-it[data-r] { cursor: pointer; } #tradewin .tr-it[data-r]:hover { background: rgba(255,230,160,0.12); }
#tradewin .tr-it img { width: 30px; height: 27px; image-rendering: pixelated; } #tradewin .tr-it .qty { position: absolute; left: 3px; top: 0; color: #ff0; font-weight: normal; }
#tradewin .tr-it .nm { color: #fff; font-weight: normal; } #tradewin .tr-none { color: #8a7a5a; text-align: center; margin-top: 50px; font-weight: normal; }
#tradewin .tr-status { text-align: center; margin: 6px 0; color: #c8b890; font-weight: normal; } #tradewin .tr-status b { color: #40ff40; }
#tradewin .tr-btns { display: flex; justify-content: center; gap: 14px; }
#tradewin .tr-btn { cursor: pointer; padding: 4px 18px; background: #4a3e2e; border: 1px solid #120e0a; box-shadow: inset 1px 1px #7d6e56, inset -1px -1px #2a2016; }
#tradewin .tr-btn:hover { color: #fff; }

/* =====================================================================
   The Gate of Kalliste: login / registration, drawn into the world
   ===================================================================== */
#gate { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #0c0810; color: #3e3024; font-family: 'IM Fell English', Georgia, serif; user-select: text; -webkit-user-select: text; transition: opacity 1.2s ease; }
#gate[hidden], #gate [hidden] { display: none !important; }
#gate-scene { position: absolute; inset: 0; display: block; }
.gate-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--lintel, 0px) + 8px) 16px 64px; overflow-y: auto; box-sizing: border-box; }
.gate-logo { margin-top: auto; margin-bottom: clamp(10px, 2.4vh, 22px); text-align: center; pointer-events: none; }
.gate-logo h1 { margin: 0; font: 700 clamp(34px, 6vw, 66px)/1 'Cinzel', 'Times New Roman', serif; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(#fff4cc 0%, #f2c464 44%, #a86a22 54%, #e8b050 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #2a1406) drop-shadow(0 0 20px rgba(255,150,60,.45)); }
.gate-logo p { margin: 8px 0 0; font: 500 clamp(10px, 1.2vw, 13px) 'Cinzel', serif; letter-spacing: .38em; text-transform: uppercase; color: #ecd09a; text-shadow: 0 1px 2px #000, 0 0 12px rgba(0,0,0,.9); }
.card { position: relative; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the stele: a marble tablet with a little pediment, lit on both sides by the braziers */
.stele { width: min(372px, 100%); filter: drop-shadow(0 20px 26px rgba(0,0,0,.65)); }
.stele-pediment { height: 42px; margin: 0 -10px; position: relative; background: linear-gradient(rgba(30,16,30,.3), rgba(255,150,70,.08)), var(--marble, #ddd2c0); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.stele-pediment span { position: absolute; left: 50%; top: 17px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle, #9a8870 28%, transparent 31%), repeating-conic-gradient(#b0a088 0 15deg, #ddd2bf 15deg 30deg); box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }
.stele-cornice { height: 10px; margin: 0 -13px; background: linear-gradient(#f2eadc, #a89a86); box-shadow: 0 3px 5px rgba(0,0,0,.35); position: relative; z-index: 1; }
.stele-body { position: relative; padding: 16px 28px 22px;
  background: linear-gradient(90deg, rgba(255,140,60,.24), rgba(255,140,60,0) 26%, rgba(255,140,60,0) 74%, rgba(255,140,60,.24)), linear-gradient(rgba(24,12,30,.2), rgba(70,36,20,.12)), var(--marble, #ddd2c0);
  box-shadow: inset 0 0 34px rgba(60,40,30,.35), inset 9px 0 14px -9px rgba(0,0,0,.45), inset -9px 0 14px -9px rgba(0,0,0,.45); }
.stele-base { height: 14px; margin: 0 -15px; background: linear-gradient(#d2c6b3, #7e705e); box-shadow: 0 5px 8px rgba(0,0,0,.5); }
.meander { height: 14px; margin: -4px -14px 12px; opacity: .75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14'%3E%3Cpath d='M0 12.5H20M17 12.5V1.5H5V9.5H13V5H9' fill='none' stroke='%23776452' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center; }
#gate h2 { margin: 2px 0 12px; text-align: center; font: 700 19px 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; color: #46362a; text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(0,0,0,.3); }
#gate label { display: block; margin: 10px 0 5px; font: 700 11.5px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; color: #5a4838; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.stele input { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 2px; outline: none;
  font: 19px 'IM Fell English', Georgia, serif; color: #2a1d14; caret-color: #8a3a1a;
  background: linear-gradient(rgba(70,50,35,.24), rgba(70,50,35,.1));
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5), inset 0 0 0 1px rgba(60,40,25,.25), 0 1px 0 rgba(255,255,255,.6); transition: box-shadow .15s; }
.stele input:focus { box-shadow: inset 0 2px 5px rgba(0,0,0,.5), inset 0 0 0 1px rgba(60,40,25,.25), 0 0 0 2px rgba(255,190,90,.85), 0 0 16px rgba(255,150,50,.55); }
#gate input[aria-invalid="true"] { box-shadow: inset 0 2px 5px rgba(0,0,0,.45), 0 0 0 2px rgba(150,36,16,.75); }
.stele input:-webkit-autofill { -webkit-text-fill-color: #2a1d14; box-shadow: inset 0 0 0 40px #d6cab7, inset 0 2px 5px rgba(0,0,0,.5); transition: background-color 99999s; }
.gate-line { margin: 2px 0 14px; font-size: 17px; line-height: 1.35; text-align: center; color: #3e3024; }
.gate-line b { font-weight: normal; font-style: italic; color: #6a2410; }
.gate-err { margin: 12px 0 0; padding: 7px 10px; font-size: 15.5px; line-height: 1.3; color: #7a1c0c; background: rgba(140,40,20,.12); border-left: 3px solid #8a2a14; }
.gate-alt { margin: 14px 0 0; text-align: center; font-size: 15px; color: #4a3a2e; }
.linkish { background: none; border: 0; padding: 0; font: italic 15.5px 'IM Fell English', Georgia, serif; color: #7a2e12; text-decoration: underline; text-decoration-color: rgba(122,46,18,.45); text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: #a8400f; }
#gate button:focus-visible, #kicked button:focus-visible { outline: 2px solid #ffc060; outline-offset: 3px; }

/* bronze plaque buttons: rivets, patina, and a real press */
.plaque-btn { display: block; width: 100%; margin-top: 18px; padding: 12px 18px; cursor: pointer; position: relative;
  font: 700 16px 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; color: #2c1a08; text-shadow: 0 1px 0 rgba(255,225,170,.55);
  background: radial-gradient(circle at 12px 50%, #f4cc88 0 2px, #4a2a0c 2.5px 3.5px, transparent 4px), radial-gradient(circle at calc(100% - 12px) 50%, #f4cc88 0 2px, #4a2a0c 2.5px 3.5px, transparent 4px),
    radial-gradient(ellipse at 8% 20%, rgba(70,140,120,.4), transparent 22%), radial-gradient(ellipse at 94% 85%, rgba(70,140,120,.32), transparent 20%),
    linear-gradient(#e6ae62, #b67836 46%, #8e5626 56%, #6a3e18);
  border: 1px solid #3a2208; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,232,180,.75), inset 0 -2px 0 rgba(0,0,0,.35), 0 4px 0 #3a2208, 0 7px 14px rgba(0,0,0,.5);
  transition: transform .08s, box-shadow .08s, filter .2s; }
.plaque-btn:hover { filter: brightness(1.1) saturate(1.1); }
.plaque-btn:active, .plaque-btn.pressed { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,232,180,.5), inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 #3a2208, 0 2px 5px rgba(0,0,0,.5); filter: brightness(.95); }
.plaque-btn:disabled { filter: grayscale(.4) brightness(.8); cursor: default; }

/* the scroll of citizens, for new names */
.scroll-card { width: min(392px, 100%); display: grid; grid-template-rows: auto 1fr auto; filter: drop-shadow(0 20px 26px rgba(0,0,0,.65)); }
.scroll-card .sheet { min-height: 0; overflow: hidden; margin: 0 8px; padding: 0 30px; color: #3a2414;
  background: radial-gradient(ellipse at 50% 35%, rgba(255,246,218,.65), rgba(255,246,218,0) 70%), linear-gradient(90deg, rgba(110,70,25,.3), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(110,70,25,.3)), var(--grain, none), linear-gradient(#eddbb2, #d9bf88); }
.scroll-card .sheet > div { padding: 22px 0 22px; }
.scroll-card.unroll { animation: unroll .7s cubic-bezier(.2,.7,.25,1) both; }
@keyframes unroll { from { grid-template-rows: auto 0fr auto; } to { grid-template-rows: auto 1fr auto; } }
.roll { height: 22px; border-radius: 11px; position: relative; z-index: 1; background: linear-gradient(#4a300e, #b8945a 28%, #f2deac 45%, #b08a52 70%, #3e2808); box-shadow: 0 3px 6px rgba(0,0,0,.5); }
.roll::before, .roll::after { content: ''; position: absolute; top: 2px; width: 13px; height: 18px; border-radius: 5px; background: linear-gradient(#2e1806, #8a5a2a 50%, #2e1806); }
.roll::before { left: -9px; } .roll::after { right: -9px; }
.roll.top { margin-bottom: -5px; } .roll.bottom { margin-top: -5px; }
.scroll-card h2 { color: #4a2210 !important; text-shadow: none !important; }
.scroll-card h2::after { content: ''; display: block; height: 10px; margin: 8px -6px 0; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 9H16M13 9V1H4V7H10V4H7' fill='none' stroke='%238a3a1c' stroke-width='1.3'/%3E%3C/svg%3E") repeat-x center; }
.scroll-card label { color: #5a3218 !important; text-shadow: none !important; }
.scroll-card .gate-line { color: #4a2c16; font-style: italic; }
.scroll-card input { display: block; width: 100%; box-sizing: border-box; padding: 6px 2px 5px; border: 0; border-bottom: 2px solid rgba(90,50,20,.55); border-radius: 0; outline: none; background: transparent;
  font: 21px 'IM Fell English', Georgia, serif; color: #1e0e06; caret-color: #8a2a10; transition: border-color .15s, background .15s; }
.scroll-card input:focus { border-bottom-color: #8a2a10; background: rgba(255,200,120,.18); }
.scroll-card input:-webkit-autofill { -webkit-text-fill-color: #1e0e06; box-shadow: inset 0 0 0 40px #e6d2a4; }
.scroll-card label small { float: right; font: italic 13px 'IM Fell English', Georgia, serif; letter-spacing: 0; text-transform: none; color: #7a5a3a; }
.inked { margin: 4px 0 2px; text-align: center; font: italic 34px 'IM Fell English', Georgia, serif; color: #24100a; }
.inked span { display: inline-block; padding: 0 4px; clip-path: inset(0 100% 0 0); animation: ink 1.2s .35s ease-out forwards; }
@keyframes ink { to { clip-path: inset(0 -10px 0 0); } }
.seal { width: 62px; height: 62px; margin: 4px auto 10px; border-radius: 50% 46% 52% 48%; font: 700 30px/62px 'Cinzel', serif; text-align: center; color: rgba(70,4,2,.75); text-shadow: 0 1px 0 rgba(255,140,120,.5);
  background: radial-gradient(circle at 38% 32%, #d8483e, #8a1a14 60%, #5a0e0a); box-shadow: 0 2px 5px rgba(0,0,0,.4), inset 0 0 0 5px rgba(110,16,12,.6), inset 0 0 0 7px rgba(255,120,100,.2);
  animation: stamp .45s 1.4s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes stamp { from { transform: scale(2.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

.embers { display: flex; justify-content: center; gap: 12px; margin: 8px 0 6px; }
.embers i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(#fff2b0, #ff9a30 50%, #c03a10); box-shadow: 0 0 12px #ff8a30; animation: ember 1.1s infinite ease-in-out; }
.embers i:nth-child(2) { animation-delay: .18s; } .embers i:nth-child(3) { animation-delay: .36s; }
@keyframes ember { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.stele.rise { animation: rise .5s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.card.shake { animation: shake .42s ease-in-out; }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

/* news from beyond the sea: a Roman-red ribbon under the tablet */
.gate-news { margin: 18px 0 auto; max-width: min(560px, calc(100% - 20px)); box-sizing: border-box; padding: 9px 22px 10px; text-align: center; position: relative;
  font: 600 13px/1.35 'Cinzel', serif; letter-spacing: .08em; color: #f6e2b4; text-shadow: 0 1px 2px rgba(0,0,0,.8);
  background: linear-gradient(#8e1c20, #6a1216 60%, #4e0c10); border: 1px solid #c8963c; border-radius: 2px;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), inset 0 0 0 4px rgba(232,184,96,.35), 0 8px 18px rgba(0,0,0,.55); }
.gate-news::before, .gate-news::after { content: ''; position: absolute; top: 50%; width: 14px; height: 28px; margin-top: -14px; background: #4e0c10; border: 1px solid #c8963c; }
.gate-news::before { left: -10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); border-right: 0; }
.gate-news::after { right: -10px; clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); border-left: 0; }
.gate-news-tag { display: block; margin-bottom: 3px; font: 700 11px 'Cinzel', serif; letter-spacing: .34em; text-transform: uppercase; color: #ffd27a; animation: newsglow 2.6s ease-in-out infinite; }
.gate-news-text b { color: #ffe3a0; font-weight: 700; }
@keyframes newsglow { 50% { color: #fff1c8; text-shadow: 0 0 10px rgba(255,190,90,.9), 0 1px 2px rgba(0,0,0,.8); } }
@media (max-width: 560px) { .gate-news { font-size: 12px; padding: 8px 16px; margin-top: 14px; } }
@media (max-height: 720px) { .gate-news { margin-top: 10px; padding: 6px 20px 7px; } .gate-news-tag { margin-bottom: 1px; } }
#gate[data-state="connecting"] .gate-news { display: none; }

/* the world status plaque, and the sound toggle */
.gate-plaque { position: absolute; left: 16px; bottom: 14px; padding: 7px 14px 7px 30px; white-space: nowrap;
  font: 700 12px 'Cinzel', serif; letter-spacing: .07em; color: #2c1a08; text-shadow: 0 1px 0 rgba(255,225,170,.5);
  background: radial-gradient(ellipse at 92% 30%, rgba(70,140,120,.35), transparent 30%), linear-gradient(#dca45c, #a86c30 55%, #7a4a1e);
  border: 1px solid #3a2208; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,232,180,.65), 0 4px 10px rgba(0,0,0,.6); }
.gate-plaque::before { content: ''; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: radial-gradient(#fff4b8, #ffa030 55%, #b0400e); box-shadow: 0 0 8px 2px rgba(255,150,40,.8); animation: ember 2.4s infinite ease-in-out; }
.gate-plaque span { margin: 0 8px; opacity: .55; }
.gate-plaque b { color: #1a0c02; }
.gate-plaque.down::before { background: #4a3a30; box-shadow: none; animation: none; }
.gate-plaque.down #gs-status { color: #6e1406; }
.gate-mute { position: absolute; right: 16px; bottom: 12px; width: 42px; height: 42px; padding: 10px; border-radius: 50%; cursor: pointer; color: #2c1a08;
  border: 1px solid #3a2208; background: radial-gradient(circle at 35% 30%, #f2c472, #b07434 55%, #6a3e18); box-shadow: inset 0 1px 0 rgba(255,232,180,.6), 0 4px 10px rgba(0,0,0,.6); }
.gate-mute:active { transform: translateY(2px); }
.gate-mute svg { display: block; width: 100%; height: 100%; }
.gate-mute .cross, .gate-mute.muted .waves { display: none; }
.gate-mute.muted .cross { display: inline; }

/* passing through: the veil that hides the world being built */
.gate-veil { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: #050306; opacity: 0; pointer-events: none; transition: opacity 1s ease; }
.gate-veil span { font: 600 17px 'Cinzel', serif; letter-spacing: .32em; text-transform: uppercase; color: #e8b860; text-shadow: 0 0 16px rgba(255,140,40,.65); animation: breathe 2.2s infinite ease-in-out; }
@keyframes breathe { 50% { opacity: .55; } }
#gate.veiled .gate-veil { opacity: 1; pointer-events: auto; }
#gate.gone { opacity: 0; pointer-events: none; }
body.at-gate #stage { visibility: hidden; }

@media (max-height: 720px) {
  .gate-logo h1 { font-size: clamp(30px, 5vw, 46px); }
  .gate-logo { margin-bottom: 10px; }
  .stele-body { padding: 10px 24px 16px; }
  #gate label { margin: 7px 0 4px; }
  .plaque-btn { margin-top: 13px; padding: 10px 16px; }
  .gate-alt { margin-top: 10px; }
  .scroll-card .sheet > div { padding: 14px 0; }
}
@media (max-width: 560px) {
  .gate-ui { padding: calc(var(--lintel, 0px) + 6px) 16px 58px; }
  .gate-plaque { left: 50%; right: auto; bottom: 12px; transform: translateX(-50%); font-size: 10.5px; padding: 6px 10px 6px 24px; }
  .gate-logo p { letter-spacing: .22em; }
  .gate-plaque::before { left: 8px; }
  .gate-plaque span { margin: 0 5px; }
  .gate-mute { top: 8px; bottom: auto; right: 8px; width: 34px; height: 34px; padding: 7px; }
  .stele-body { padding-left: 20px; padding-right: 20px; }
  .scroll-card .sheet { padding: 0 20px; }
}

/* in the world: connection trouble and being sent away */
#netbar { position: fixed; top: 10px; left: 50%; z-index: 60; transform: translate(-50%, -90px); padding: 8px 18px; pointer-events: none;
  font: 700 13px 'Cinzel', serif; letter-spacing: .05em; color: #ffe0a0; background: rgba(30,18,10,.94); border: 1px solid #8a6a3a; border-radius: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.6); transition: transform .35s ease; }
#netbar.on { transform: translate(-50%, 0); }
#kicked { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,3,6,.8); }
.kicked-card { width: min(360px, 100%); box-sizing: border-box; padding: 24px 28px; text-align: center; color: #3e3024; font-family: 'IM Fell English', Georgia, serif;
  background: linear-gradient(90deg, rgba(255,140,60,.2), rgba(255,140,60,0) 30%, rgba(255,140,60,0) 70%, rgba(255,140,60,.2)), var(--marble, #ddd2c0); box-shadow: 0 20px 40px rgba(0,0,0,.7), inset 0 0 30px rgba(60,40,30,.35); }
.kicked-title { font: 700 18px 'Cinzel', serif; letter-spacing: .12em; text-transform: uppercase; color: #46362a; }
.kicked-card p { font-size: 17px; line-height: 1.35; margin: 12px 0 4px; }

/* =====================================================================
   Phones and tablets (html.touch is only set when the main pointer is a finger)
   ===================================================================== */
#chatline { pointer-events: none; }
/* the real text box over the chat line: invisible, and only touchable on touch screens */
#chatfield { position: absolute; inset: -6px 0 -2px; pointer-events: none; }
.touch #chatfield { pointer-events: auto; }
.touch.composing #chatinput { background: rgba(255, 240, 200, 0.55); box-shadow: 0 0 0 1px rgba(120, 80, 30, 0.6); }
.touch #chatinput::after { content: 'tap to chat'; position: absolute; right: 2px; top: 0; font: italic 12px/17px 'IM Fell English', Georgia, serif; color: rgba(60, 40, 20, 0.55); }
.touch.composing #chatinput::after, .touch #chatinput.has-text::after { content: none; }
/* no page zooming, bouncing, text callouts or grey tap flashes inside the game */
html.touch, html.touch body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
.touch #client { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.touch #gl { touch-action: none; }

/* upright phone: suggest turning it sideways (dismissible) */
#rotatehint { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  html.touch:not(.rotate-ok) #rotatehint { display: flex; position: fixed; inset: 0; z-index: 40; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 3, 8, 0.82); }
}
#rotatehint > div { max-width: 300px; text-align: center; font: 17px/1.4 'IM Fell English', Georgia, serif; color: #f0dcb0; }
#rotatehint button { display: block; margin: 18px auto 0; padding: 8px 18px; font: 700 13px 'Cinzel', serif; letter-spacing: .12em; text-transform: uppercase; color: #2c1a08;
  background: linear-gradient(#e6ae62, #b67836 46%, #8e5626 56%, #6a3e18); border: 1px solid #3a2208; border-radius: 3px; }
.rh-phone { width: 34px; height: 56px; margin: 0 auto 16px; border: 3px solid #e8b860; border-radius: 7px; animation: rh-turn 2.4s ease-in-out infinite; }
@keyframes rh-turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* "Epic updates are coming this way!" */
#notice { position: fixed; top: 10px; left: 50%; z-index: 61; transform: translate(-50%, -120px); transition: transform .4s ease; max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 9px 20px 10px; text-align: center; pointer-events: none;
  font: 700 14px/1.35 'Cinzel', serif; letter-spacing: .06em; color: #fff0c8; text-shadow: 0 1px 2px #000;
  background: linear-gradient(#8e1c20, #5e0e12); border: 1px solid #e0b060; border-radius: 3px; box-shadow: 0 0 22px rgba(255, 170, 60, .45), 0 6px 18px rgba(0, 0, 0, .6); }
#notice.on { transform: translate(-50%, 0); }
#notice small { display: block; font: 600 12px 'Cinzel', serif; letter-spacing: .1em; color: #ffd98a; }
#netbar.good { background: rgba(20, 60, 24, .94); border-color: #8ac070; color: #e8ffd8; }

/* =====================================================================
   The floating layout (html.mobile-wide): the world fills the screen, the interface floats over it.
   Always used by a phone held sideways; everywhere else only in the Modern interface (Options). Classic
   desktop and tablets keep the layout above. --hud and --chat (set by main.js) shrink things a little on
   short or narrow phones and grow them on big screens (html.hud-big, further down).
   ===================================================================== */
html.mobile-wide, html.mobile-wide body { background: #000; }
html.mobile-wide #stage { align-items: stretch; justify-content: stretch; }
html.mobile-wide #client { background: #000 !important; }
html.mobile-wide #viewport { left: 0; top: 0; width: 100%; height: 100%; box-shadow: none; }
html.mobile-wide #gl { width: 100%; height: 100%; }
html.mobile-wide #hover, html.mobile-wide #chatbtns, html.mobile-wide #savebtn { display: none !important; }
/* minimap: top right, clear of the notch */
html.mobile-wide #mapframe { left: auto; right: calc(env(safe-area-inset-right, 0px) + 2px); top: calc(env(safe-area-inset-top, 0px) + 2px); transform: scale(calc(0.7 * var(--hud, 1))); transform-origin: top right; z-index: 5; }
html.mobile-wide #minimap { box-shadow: 0 0 0 2px #000, 0 0 0 5px #8a7658, 0 0 0 6px #000, 0 4px 12px rgba(0, 0, 0, .6) !important; }
/* HELP and MAP: two small plaques beside the minimap */
html.mobile-wide #tabsbot { left: auto; top: calc(env(safe-area-inset-top, 0px) + 6px); right: calc(env(safe-area-inset-right, 0px) + 150px * var(--hud, 1)); width: 112px; height: 30px; transform: scale(var(--hud, 1)); transform-origin: top right; z-index: 5; }
html.mobile-wide #tabsbot .bbtn { flex: 1; height: 30px; line-height: 30px; }
/* tabs along the bottom right, the panel stacked above them */
html.mobile-wide #tabstop { left: auto; top: auto; right: calc(env(safe-area-inset-right, 0px) + 4px); bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); width: auto; height: 40px; transform: scale(var(--hud, 1)); transform-origin: bottom right; z-index: 6; }
html.mobile-wide .tab { width: 40px !important; height: 40px !important; }
html.mobile-wide .tab img { width: 24px; height: 24px; margin-top: 3px; }
html.mobile-wide #panel { left: auto; top: auto; right: calc(env(safe-area-inset-right, 0px) + 4px); bottom: calc(env(safe-area-inset-bottom, 0px) + 4px + 41px * var(--hud, 1));
  transform: scale(calc(0.86 * var(--hud, 1))); transform-origin: bottom right; z-index: 6;
  background: #3e3529 var(--stone) !important; background-size: 256px !important; border-radius: 3px;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #6d6252, 0 0 0 4px #000, inset 0 0 22px rgba(0, 0, 0, .75), 0 8px 18px rgba(0, 0, 0, .55) !important; }
html.mobile-wide #panel { transition: transform .14s ease-out, opacity .12s linear, visibility 0s; }
/* folded: the panel folds down into its tab row, quickly and without fuss */
html.mobile-wide #panel.folded { transform: scale(calc(0.86 * var(--hud, 1))) scaleY(0.04); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .14s ease-in, opacity .12s linear, visibility 0s .14s; }
/* chat and dialogue: bottom left over the world, on parchment */
html.mobile-wide #chat { left: calc(env(safe-area-inset-left, 0px) + 4px); top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); transform: scale(var(--chat, 1)); transform-origin: bottom left; z-index: 6;
  background: rgba(226, 212, 172, 0.9) var(--parch) !important; background-size: 256px !important; background-blend-mode: multiply; border-radius: 3px;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #7d6e56, 0 0 0 4px #000, 0 8px 18px rgba(0, 0, 0, .5) !important; }
/* windows (shop, smithing, trade) sit above the chat and never run off the bottom */
html.mobile-wide .win, html.mobile-wide #smithwin, html.mobile-wide #tradewin { z-index: 30; max-height: calc(100vh - 40px); overflow-y: auto; }
html.mobile-wide #smithwin { left: calc(env(safe-area-inset-left, 0px) + 12px); top: 10px; }
html.mobile-wide #tut-banner { top: calc(env(safe-area-inset-top, 0px) + 6px); max-width: calc(100vw - 340px); }
#notice span { font-size: 15px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
#notice.soon { animation: notice-pulse 1s ease-in-out infinite; }
@keyframes notice-pulse { 50% { box-shadow: 0 0 34px rgba(255, 190, 80, .85), 0 6px 18px rgba(0, 0, 0, .6); } }

/* ---------- phone widescreen: a narrower chat that folds into a parchment strip ---------- */
#chat-latch, #chatstrip { display: none; }
html.mobile-wide #chat { width: 420px; transition: transform .14s ease-out, opacity .12s linear, visibility 0s; }
html.mobile-wide #chathead { width: 64px; height: 64px; top: 16px; }
html.mobile-wide #dialogue.left #chathead { left: 10px; } html.mobile-wide #dialogue.right #chathead { right: 10px; }
html.mobile-wide .dname, html.mobile-wide .dtext { left: 82px; right: 82px; }
html.mobile-wide #dialogue.info .dtext { left: 34px; right: 34px; }
/* the chat is narrower here: keep the margin only on the side with the head, so a long speech stays on three lines,
   and a four-line one still clears "Click here to continue" */
html.mobile-wide #dialogue.left .dname, html.mobile-wide #dialogue.left .dtext { left: 80px; right: 16px; }
html.mobile-wide #dialogue.right .dname, html.mobile-wide #dialogue.right .dtext { left: 16px; right: 80px; }
html.mobile-wide .dtext { top: 30px; line-height: 15px; }
html.mobile-wide .dcont { bottom: 3px; }
/* the latch: a small riveted bronze plate on the top edge of the chat frame, with an engraved chevron */
html.mobile-wide #chat-latch { display: block; position: absolute; top: -13px; right: 14px; width: 38px; height: 17px; z-index: 3; cursor: pointer;
  background: radial-gradient(circle at 5px 50%, #f0c878 0 1.2px, #3a2408 1.6px 2.2px, transparent 2.6px), radial-gradient(circle at calc(100% - 5px) 50%, #f0c878 0 1.2px, #3a2408 1.6px 2.2px, transparent 2.6px), linear-gradient(#c89250, #8a5a26 60%, #5e3a14);
  border: 1px solid #1c1006; border-bottom: none; border-radius: 4px 4px 0 0; box-shadow: inset 0 1px 0 rgba(255, 226, 170, .55), 0 -1px 3px rgba(0, 0, 0, .45); }
html.mobile-wide #chat-latch::after { content: ''; position: absolute; left: 50%; top: 4px; width: 12px; height: 7px; margin-left: -6px; background: #2a1606; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 1px 0 rgba(255, 220, 160, .55)); }
/* folded: the chat folds down to nothing, the strip takes its place */
html.mobile-wide.chat-folded #chat { transform: scale(var(--chat, 1)) scaleY(0.05); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .14s ease-in, opacity .12s linear, visibility 0s .14s; }
html.mobile-wide #chatstrip { display: flex; align-items: center; gap: 7px; position: absolute; z-index: 6; cursor: pointer; box-sizing: border-box;
  left: calc(env(safe-area-inset-left, 0px) + 4px); bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); height: 27px; width: min(290px, 40vw); padding: 0 6px 0 9px;
  background: rgba(226, 212, 172, 0.95) var(--parch); background-size: 256px; background-blend-mode: multiply; border-radius: 2px 2px 3px 3px;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #7d6e56, 0 0 0 4px #000, 0 6px 14px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity .1s linear, transform .12s ease-out, visibility 0s .12s; }
html.mobile-wide.chat-folded #chatstrip { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .12s linear .08s, transform .12s ease-out .08s, visibility 0s; }
#chatstrip .cs-label { font: bold 13px 'IM Fell English', Georgia, serif; font-variant: small-caps; letter-spacing: .06em; color: #4a2410; text-shadow: 0 1px 0 rgba(255, 244, 214, .7); }
#chatstrip .cs-last { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: italic 12px 'IM Fell English', Georgia, serif; color: #3a2a18; }
#chatstrip .cs-seal { flex: none; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box; border-radius: 50% 46% 52% 48%; text-align: center; font: bold 10px/16px Tahoma, sans-serif; color: #ffe8c8;
  background: radial-gradient(circle at 38% 32%, #d8483e, #8a1a14 62%, #5a0e0a); box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(110, 16, 12, .6); }
#chatstrip .cs-hinge { flex: none; position: relative; width: 26px; height: 15px; border: 1px solid #1c1006; border-radius: 3px;
  background: radial-gradient(circle at 4px 50%, #f0c878 0 1px, #3a2408 1.4px 2px, transparent 2.4px), radial-gradient(circle at calc(100% - 4px) 50%, #f0c878 0 1px, #3a2408 1.4px 2px, transparent 2.4px), linear-gradient(#c89250, #8a5a26 60%, #5e3a14);
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, .55); }
#chatstrip .cs-hinge::after { content: ''; position: absolute; left: 50%; top: 4px; width: 9px; height: 5px; margin-left: -4.5px; background: #2a1606; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 1px 0 rgba(255, 220, 160, .55)); }
/* the tutorial objective: compact, centred over the open part of the screen, never under the minimap */
html.mobile-wide #tut-banner { left: calc((100% - 280px) / 2); width: auto; max-width: min(400px, calc(100% - 300px)); top: calc(env(safe-area-inset-top, 0px) + 4px);
  font-size: 11px; line-height: 14px; padding: 3px 9px 4px; border-width: 1px; }
html.mobile-wide #tut-banner .tut-step { font-size: 9px; margin-bottom: 0; }

/* ---------- the chat composer: parchment pinned to the top of the on-screen keyboard (touch screens only) ---------- */
#composer { position: fixed; left: 0; top: 0; z-index: 58; box-sizing: border-box; padding: 6px 10px 7px; will-change: transform;
  background: rgba(228, 214, 176, 0.97) var(--parch); background-size: 256px; background-blend-mode: multiply; border-radius: 3px 3px 0 0;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #7d6e56, 0 0 0 4px #000, 0 -6px 16px rgba(0, 0, 0, .45); font: 15px/17px 'IM Fell English', Georgia, serif; color: #000; }
#composer[hidden] { display: none; }
#composer .cp-log { max-height: 72px; overflow: hidden; padding-bottom: 4px; border-bottom: 1px solid rgba(90, 60, 25, .45); display: flex; flex-direction: column; justify-content: flex-end; }
#composer .cp-log > div { overflow-wrap: anywhere; word-break: break-word; }
#composer .cp-log img.crown { width: 11px; height: 9px; vertical-align: 0; margin-right: 2px; }
#composer .cp-row { display: flex; align-items: flex-end; gap: 8px; padding-top: 5px; }
#composer .cp-name { padding-bottom: 5px; }
#composer .cp-name { flex: none; font-weight: bold; }
#cp-input { flex: 1; min-width: 0; height: 27px; font: 16px/20px 'IM Fell English', Georgia, serif; color: #0000c0; background: transparent; border: 0; border-bottom: 1px solid rgba(90, 60, 25, .55); outline: none; padding: 3px 2px; border-radius: 0; -webkit-appearance: none; resize: none; overflow-y: auto; overflow-wrap: anywhere; display: block; }
#composer .cp-send { flex: none; height: 28px; padding: 0 16px; cursor: pointer; font: bold 12px Tahoma, Verdana, sans-serif; letter-spacing: .04em; color: #2a1606; text-shadow: 0 1px 0 rgba(255, 226, 170, .6);
  border: 1px solid #1c1006; border-radius: 3px;
  background: radial-gradient(circle at 6px 50%, #f0c878 0 1.2px, #3a2408 1.6px 2.2px, transparent 2.6px), radial-gradient(circle at calc(100% - 6px) 50%, #f0c878 0 1.2px, #3a2408 1.6px 2.2px, transparent 2.6px), linear-gradient(#d09a56, #9a6a30 55%, #6a4418);
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, .6), 0 2px 0 #3a2208; }
#composer .cp-send:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 226, 170, .4); }
#composer .cp-close { flex: none; position: relative; width: 30px; height: 20px; border: 1px solid #1c1006; border-radius: 3px; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 5px 50%, #f0c878 0 1.2px, #3a2408 1.6px 2.2px, transparent 2.6px), radial-gradient(circle at calc(100% - 5px) 50%, #f0c878 0 1.2px, #3a2408 1.6px 2.2px, transparent 2.6px), linear-gradient(#c89250, #8a5a26 60%, #5e3a14);
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, .55); }
#composer .cp-close::after { content: ''; position: absolute; left: 50%; top: 6px; width: 11px; height: 6px; margin-left: -5.5px; background: #2a1606; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 1px 0 rgba(255, 220, 160, .55)); }

/* ---------- the tutorial objective on touch screens: same parchment, but it moves aside and shrinks as needed ---------- */
html.touch #tut-banner { width: auto; max-width: min(452px, calc(100% - 12px)); }
:is(html.touch, html.mobile-wide) #tut-banner.tut-compact { max-width: 300px; font-size: 11px; line-height: 14px; padding: 3px 8px 4px; }
:is(html.touch, html.mobile-wide) #tut-banner.tut-compact .tut-step { font-size: 9px; margin-bottom: 0; }
:is(html.touch, html.mobile-wide) #tut-banner.tut-mini { max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 13px; padding: 2px 7px 3px; }
:is(html.touch, html.mobile-wide) #tut-banner.tut-mini .tut-step { display: inline; margin-right: 5px; }

/* ---------- windows (smithing, shops, trade, bank, scrolls, appearance) ---------- */
/* they keep their classic places inside a layer: the whole view, except on big floating screens, where the layer
   becomes the classic 512 x 334 view, centred and grown with the interface so windows are neither tiny nor stranded */
#winlayer { position: absolute; inset: 0; pointer-events: none; }
#winlayer > * { pointer-events: auto; }
html.hud-big #winlayer { inset: auto; left: 50%; top: 50%; width: 512px; height: 334px; transform: translate(-50%, -50%) scale(var(--hud, 1)); z-index: 20; }
html.hud-big .win, html.hud-big #smithwin, html.hud-big #tradewin { max-height: calc((100vh - 40px) / var(--hud, 1)); }

/* ---------- the Modern interface on a desktop or tablet (html.hud-big / not touch) ---------- */
/* with a mouse, the "Walk here / Attack Goblin" line still matters: top left, clear of everything else */
html.mobile-wide:not(.touch) #hover { display: block !important; left: calc(env(safe-area-inset-left, 0px) + 8px); top: 6px; z-index: 5; transform: scale(var(--hud, 1)); transform-origin: top left; }
/* the tutorial objective grows with the rest of the interface */
html.hud-big #tut-banner { font-size: calc(12px * var(--hud, 1)); line-height: 1.3; padding: calc(4px * var(--hud, 1)) calc(12px * var(--hud, 1)) calc(5px * var(--hud, 1));
  max-width: min(calc(452px * var(--hud, 1)), calc(100% - 360px * var(--hud, 1))); }
html.hud-big #tut-banner .tut-step { font-size: calc(10px * var(--hud, 1)); }
/* the folded chat strip is the way back in: on big screens it grows with the rest of the interface */
html.hud-big #chatstrip { transform-origin: bottom left; transform: translateY(6px) scale(var(--hud, 1)); }
html.hud-big.chat-folded #chatstrip { transform: scale(var(--hud, 1)); }

/* ---------- the Quest Helper: wax seals at the foot of a journal, a pinned note, a bronze edge ---------- */
.scroll .qh { margin: 12px 0 2px; padding-top: 7px; border-top: 1px solid rgba(90,64,24,0.35); }
.qh-row { display: flex; align-items: center; justify-content: center; gap: 14px; font: 14px 'IM Fell English', Georgia, serif; color: #5a4020; }
.qh-lbl { color: #3a2a10; }
.qh .qh-seal { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.qh .qh-seal i { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e0d2aa, #a8905e 72%); box-shadow: inset 0 0 0 1px rgba(60,40,10,0.45); }
.qh .qh-seal:hover { color: #800000; }
.qh .qh-seal.on { color: #800000; }
.qh .qh-seal.on i { background: radial-gradient(circle at 35% 30%, #d8503c, #8a1a14 58%, #5a0e0a); box-shadow: 0 1px 1px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,200,160,0.22); }
.scroll .qh-hint { font-style: italic; color: #3a2a10; margin: 6px 18px 0; }
.scroll .qh-more { margin: 5px 18px 0; } .qh-more span { color: #0000c0; cursor: pointer; } .qh-more span:hover { text-decoration: underline; }
.scroll .qh-step { margin: 8px 18px 0; } .qh-step b { color: #800000; font-weight: normal; }
#qhelper { position: absolute; left: 6px; top: 22px; z-index: 20; max-width: 250px; padding: 3px 9px 5px 24px; cursor: pointer;
  background: linear-gradient(#f4e9c8, #e2cf9c); border: 1px solid #5a4020; border-radius: 2px; box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
  font: 13px/15px 'IM Fell English', Georgia, serif; color: #2a1c08; transform: rotate(-0.7deg); transform-origin: top left; }
#qhelper[hidden] { display: none; }
#qhelper::before { content: ''; position: absolute; left: 7px; top: 7px; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8503c, #8a1a14 58%, #5a0e0a); box-shadow: 0 1px 1px rgba(0,0,0,0.4); }
#qhelper .qn { display: block; font: bold 9px Tahoma, Verdana, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #800000; margin-bottom: 1px; }
#qhelper:hover { filter: brightness(1.04); }
html.touch #qhelper { top: calc(env(safe-area-inset-top, 0px) + 40px); left: calc(env(safe-area-inset-left, 0px) + 8px); }
.qh-hl { box-shadow: inset 0 0 0 1px rgba(242,196,106,0.9), 0 0 6px rgba(242,196,106,0.45); border-radius: 4px; }

/* ---------- Rumours & Leads: what a player has heard, above the quests and in a scroll of its own ---------- */
.qline.rline { color: #ffb050; font-style: italic; border-bottom: 1px solid #1e1810; margin: 0 6px 3px; padding: 2px 4px 4px; }
.scroll .rhead { font-style: italic; color: #5a4020; text-align: center; margin: 0 0 10px; }
.scroll .rumour { margin: 0 0 10px; } .scroll .rumour > p { margin: 0; }
.scroll .rumour .qh { margin: 4px 0 0; padding-top: 4px; }