/* WILDS: the game frame. The classic fixed layout at 765 x 503 (scaled to the window by main.js, the 3D view drawn under the
   hole at 4,4 512 x 334): minimap and compass top right, the stone side panel with 7 tabs above and 7 below, the parchment chat
   box bottom left with its filter row. Every number here is a frame pixel. */
.game { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
body.s-game { background: url('/img/tex/site-dark.png') 0 0 / 256px, #0c0a08; }
body.s-game::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .75)); pointer-events: none; }
.gf { position: absolute; left: 0; top: 0; width: 765px; height: 503px; transform-origin: 0 0; pointer-events: none; font: 12px/1.15 var(--px); color: #ff981f; user-select: none; -webkit-user-select: none; }
.gf > * { pointer-events: auto; }
.gf-view { position: absolute; left: 4px; top: 4px; width: 512px; height: 334px; pointer-events: none; box-shadow: 0 0 0 1px #000; }
.gf-view > * { pointer-events: auto; }
.gf-map, .gf-side, .gf-chat { position: absolute; background: url('/img/tex/frame.png') 0 0 / 128px, #3e3529; }
.gf::before { content: ''; position: absolute; left: 0; top: 0; width: 516px; height: 4px; background: url('/img/tex/frame-dark.png') 0 0 / 128px; }
.gf::after { content: ''; position: absolute; left: 0; top: 4px; width: 4px; height: 334px; background: url('/img/tex/frame-dark.png') 0 0 / 128px; }
.gf-map { left: 516px; top: 0; width: 249px; height: 168px; box-shadow: inset 1px 0 0 #1b1610, inset 2px 0 0 #6b5b42; }
.gf-side { left: 516px; top: 168px; width: 249px; height: 335px; box-shadow: inset 1px 0 0 #1b1610, inset 2px 0 0 #6b5b42, inset 0 1px 0 #1b1610; }
.gf-chat { left: 0; top: 338px; width: 516px; height: 165px; box-shadow: inset 0 1px 0 #1b1610; }
.tx { text-shadow: 1px 1px 0 #000; }

/* minimap, compass, orbs */
#minimap { position: absolute; left: 63px; top: 8px; width: 152px; height: 152px; border-radius: 50%; box-shadow: 0 0 0 2px #1a140e, 0 0 0 4px #5d4f3b, 0 0 0 5px #1a140e; cursor: crosshair; background: #000; }
#compass { position: absolute; left: 30px; top: 4px; width: 34px; height: 34px; cursor: pointer; border-radius: 50%; }
.orb { position: absolute; display: grid; grid-template-columns: 22px 22px; align-items: center; height: 24px; padding: 0 2px 0 0; border: 0; background: none; font: 12px var(--pxb); color: #00ff00; text-shadow: 1px 1px 0 #000; }
.orb b { text-align: right; padding-right: 3px; font-weight: normal; font-variant-numeric: tabular-nums; }
.orb i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px #1a140e, 0 0 0 3px #6b5b42, inset 0 -6px 8px rgba(0, 0, 0, .45), inset 0 3px 4px rgba(255, 255, 255, .35); background: radial-gradient(circle at 40% 35%, #ff6a5a, #a8120a 70%); position: relative; }
.orb i::after { content: ''; position: absolute; inset: 5px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.orb-hp { left: 6px; top: 44px; } .orb-pr { left: 6px; top: 74px; } .orb-run { left: 14px; top: 104px; cursor: pointer; }
.orb-pr i { background: radial-gradient(circle at 40% 35%, #8ad8ff, #1e5fa8 70%); } .orb-run i { background: radial-gradient(circle at 40% 35%, #d8d8d0, #6a6a64 70%); }
.orb-run.is-on i { background: radial-gradient(circle at 40% 35%, #ffe57a, #c08a10 70%); }
.orb-hp i::after { background-image: var(--ic-heart); } .orb-pr i::after { background-image: var(--ic-pray); } .orb-run i::after { background-image: var(--ic-boot); }
.orb:hover i { filter: brightness(1.15); }
.pouch { position: absolute; left: 176px; top: 138px; display: grid; grid-template-columns: 22px auto; align-items: center; gap: 2px; padding: 0 4px 0 0; height: 26px; border: 0; background: none; font: 12px var(--pxb); color: #ffff00; text-shadow: 1px 1px 0 #000; cursor: pointer; white-space: nowrap; }
.pouch i { width: 22px; height: 22px; background: var(--ic-pouch) center / contain no-repeat; filter: drop-shadow(1px 1px 0 #000); }
.pouch:hover { color: #fff; }
.ws-btn { position: absolute; left: 210px; top: 6px; width: 34px; height: 24px; border: 1px solid #000; background: linear-gradient(#5a4c39, #3a3024); box-shadow: inset 0 0 0 1px #8a7656; font: 11px var(--pxb); color: #ff981f; text-shadow: 1px 1px 0 #000; }
.ws-btn b { font-weight: normal; color: #ffff00; }
html, body { overscroll-behavior-x: none; }                                   /* a trackpad's sideways swipe turns the camera, never goes back a page */
.wm-btn { position: absolute; left: 28px; top: 134px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #000; cursor: pointer; box-shadow: inset 0 0 0 1px #8a7656, 0 1px 2px rgba(0, 0, 0, .6);
  background: radial-gradient(circle at 38% 32%, #8ac8f0 0 18%, transparent 19%), radial-gradient(circle at 60% 60%, #5a9a3a 0 22%, transparent 23%), radial-gradient(circle, #2a5a9a 0 64%, #3a3024 66%); }
.wm-btn:hover { filter: brightness(1.2); }
.if.wmap { padding-bottom: 6px; } .if.wmap canvas { display: block; margin: 4px auto 0; cursor: grab; background: #06121f; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5d4f3b; }
.wm-tip { font: 11px var(--px); color: #c8b890; text-align: center; margin-top: 3px; }
body.if-top .gf-view { z-index: 8; }                                         /* the world map goes over the chat and the side panel */

/* side panel: tabs and the panel */
.tabs { position: absolute; left: 6px; width: 237px; height: 36px; display: grid; grid-template-columns: repeat(7, 33px); gap: 1px; justify-content: center; }
.tabs-top { top: 0; } .tabs-bot { bottom: 0; }
.tab { position: relative; width: 33px; height: 36px; border: 0; padding: 0; background: url('/img/tex/frame.png') center / 128px; box-shadow: inset 0 0 0 1px #1b1610, inset 1px 1px 0 1px #6b5b42; cursor: pointer; }
.tabs-top .tab { border-radius: 9px 9px 0 0; } .tabs-bot .tab { border-radius: 0 0 9px 9px; }
.tab::before { content: ''; position: absolute; inset: 6px 5px; background: var(--ic) center / contain no-repeat; filter: drop-shadow(1px 1px 0 #000); }
.tab:hover { filter: brightness(1.15); }
.tab.is-on { background: url('/img/tex/frame.png') center / 128px, #6a2018; box-shadow: inset 0 0 0 1px #1b1610, inset 0 0 0 2px #b8321e, inset 0 0 10px rgba(220, 40, 20, .55); }
.tab.is-blank { cursor: default; } .tab.is-blank::before { display: none; } .tab.is-blank:hover { filter: none; }
.panel { position: absolute; left: 28px; top: 37px; width: 194px; height: 261px; background: url('/img/tex/panel.png') 0 0 / 128px, #4a4032; box-shadow: inset 0 0 0 1px #1b1610, inset 0 0 0 2px #6b5b42, inset 0 0 18px rgba(0, 0, 0, .45); overflow: hidden; }
.pn { position: absolute; inset: 0; padding: 6px; display: none; }
.pn.is-on { display: block; }
.pn-t { font: 12px var(--pxb); color: #ff981f; text-align: center; margin: 2px 0 6px; text-shadow: 1px 1px 0 #000; }
.pn-s { font: 12px var(--px); color: #ff981f; text-shadow: 1px 1px 0 #000; }
.pn-y { color: #ffff00; } .pn-w { color: #fff; } .pn-g { color: #00ff00; } .pn-r { color: #ff3030; }
/* inventory */
.inv { display: grid; grid-template-columns: repeat(4, 42px); grid-auto-rows: 36px; justify-content: center; padding-top: 3px; }
.slot { position: relative; width: 42px; height: 36px; display: grid; place-items: center; }
.slot canvas { width: 36px; height: 32px; image-rendering: auto; pointer-events: none; }
.slot .n { position: absolute; left: 3px; top: 0; font: 12px var(--px); color: #ffff00; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.slot .n.k { color: #fff; } .slot .n.m { color: #00ff80; }
.slot .hl { display: none; position: absolute; right: 2px; bottom: 1px; width: 11px; height: 11px; background: var(--ic-skull) center / contain no-repeat; filter: drop-shadow(1px 1px 0 #000); pointer-events: none; }
.slot.is-sel canvas { filter: brightness(1.5) drop-shadow(0 0 1px #fff); }
.slot.is-drag { opacity: .35; }
.slot:hover { background: rgba(255, 255, 255, .06); }
/* skills */
.skills { display: grid; grid-template-columns: repeat(3, 62px); grid-auto-rows: 31px; gap: 1px; justify-content: center; padding-top: 1px; }
.sk { position: relative; display: grid; grid-template-columns: 24px 1fr; align-items: center; background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 1px 1px 0 1px rgba(255, 220, 160, .08); cursor: default; }
.sk i { width: 20px; height: 20px; margin-left: 2px; background: var(--ic) center / contain no-repeat; filter: drop-shadow(1px 1px 0 #000); }
.sk b { display: grid; justify-items: end; padding-right: 4px; font: 12px var(--px); font-weight: normal; color: #ffff00; text-shadow: 1px 1px 0 #000; line-height: 1; }
.sk b span { display: block; } .sk b span + span { margin-top: 2px; }
.sk.is-dim { opacity: .38; }
.sk.total { grid-template-columns: 1fr; text-align: center; cursor: pointer; } .sk.total b { justify-items: center; padding: 0; color: #ffff00; } .sk.total:hover b { color: #fff; }
.tip { position: absolute; z-index: 9; pointer-events: none; padding: 3px 5px; background: #ffffa0; border: 1px solid #000; color: #000; font: 12px var(--px); white-space: nowrap; display: none; }
/* combat */
.cb-w { text-align: center; font: 12px var(--pxb); color: #ff981f; text-shadow: 1px 1px 0 #000; margin: 2px 0; }
.cb-l { text-align: center; font: 12px var(--px); color: #ff981f; text-shadow: 1px 1px 0 #000; margin-bottom: 8px; }
.cb-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px; }
.cb-st { height: 46px; display: grid; justify-items: center; align-content: center; gap: 2px; border: 1px solid #000; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px #6b5b42; color: #ff981f; font: 12px var(--px); text-shadow: 1px 1px 0 #000; cursor: pointer; }
.cb-st i { width: 22px; height: 22px; background: var(--ic) center / contain no-repeat; }
.cb-st.is-on { background: rgba(140, 20, 10, .55); box-shadow: inset 0 0 0 1px #c83820; color: #fff; }
.cb-retal { margin: 10px 8px 0; width: calc(100% - 16px); height: 34px; border: 1px solid #000; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px #6b5b42; color: #ff981f; font: 12px var(--pxb); text-shadow: 1px 1px 0 #000; cursor: pointer; }
.cb-retal.is-on { background: rgba(140, 20, 10, .55); box-shadow: inset 0 0 0 1px #c83820; color: #fff; }
.cb-xp { text-align: center; margin-top: 8px; font: 12px var(--px); color: #ff981f; text-shadow: 1px 1px 0 #000; }
/* equipment */
.eqs { position: relative; height: 196px; }
.eqs .es { position: absolute; width: 36px; height: 36px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px #000, inset 1px 1px 0 1px #6b5b42; display: grid; place-items: center; cursor: pointer; }
.eqs .es canvas { width: 32px; height: 28px; }
.eqs .es .ghost { width: 26px; height: 26px; background: var(--ic) center / contain no-repeat; opacity: .28; }
.eqs .es .n { position: absolute; left: 1px; top: 0; font: 11px var(--px); color: #ffff00; text-shadow: 1px 1px 0 #000; }
.eq-btn { display: block; margin: 6px auto 0; width: 150px; height: 26px; border: 1px solid #000; background: linear-gradient(#5a4c39, #3a3024); box-shadow: inset 0 0 0 1px #8a7656; color: #ff981f; font: 12px var(--pxb); text-shadow: 1px 1px 0 #000; cursor: pointer; }
.eq-btn:hover { color: #fff; }
/* prayer, magic, emotes grids */
.grid5 { display: grid; grid-template-columns: repeat(5, 34px); grid-auto-rows: 34px; gap: 2px; justify-content: center; padding-top: 6px; }
.gi { width: 34px; height: 34px; border: 0; padding: 0; background: none; display: grid; place-items: center; cursor: pointer; position: relative; border-radius: 4px; }
.gi i { width: 28px; height: 28px; background: var(--ic) center / contain no-repeat; filter: drop-shadow(1px 1px 0 #000); }
.gi.is-dim i { filter: grayscale(1) brightness(.45); }
.gi.is-on { background: radial-gradient(circle, rgba(255, 230, 120, .55), rgba(255, 200, 40, .12) 65%, transparent 70%); }
.gi:hover { background-color: rgba(255, 255, 255, .06); }
.pr-pts { text-align: center; margin-top: 6px; font: 12px var(--pxb); color: #ff981f; text-shadow: 1px 1px 0 #000; }
.emotes { display: grid; grid-template-columns: repeat(4, 44px); grid-auto-rows: 38px; gap: 2px; justify-content: center; padding-top: 2px; max-height: 250px; overflow-y: auto; scrollbar-width: none; }
.em { display: grid; justify-items: center; align-content: center; gap: 1px; border: 0; background: none; color: #ff981f; font: 11px var(--px); text-shadow: 1px 1px 0 #000; cursor: pointer; padding: 0; }
.em i { width: 24px; height: 22px; background: var(--ic) center / contain no-repeat; }
.em:hover { color: #fff; background: rgba(255, 255, 255, .06); }
/* lists: friends, ignore, quests, music */
.lst { height: 196px; overflow-y: auto; margin: 0 2px; padding: 3px 4px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px #000, inset 1px 1px 0 1px #6b5b42; scrollbar-width: thin; scrollbar-color: #6b5b42 #1b1610; }
.lst div { display: flex; justify-content: space-between; gap: 6px; font: 12px var(--px); color: #fff; text-shadow: 1px 1px 0 #000; padding: 1px 0; cursor: default; white-space: nowrap; }
.lst div span { overflow: hidden; text-overflow: ellipsis; } .lst div em { font-style: normal; color: #00ff00; flex: none; } .lst div em.off { color: #ff3030; }
.lst .q-red { color: #ff3030; } .lst .q-yel { color: #ffff00; } .lst .q-grn { color: #00ff00; } .lst div.is-link { cursor: pointer; } .lst div.is-link:hover span { text-decoration: underline; }
.lst-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 6px 2px 0; }
.lst-btns button, .ui-btn { height: 26px; border: 1px solid #000; background: linear-gradient(#5a4c39, #3a3024); box-shadow: inset 0 0 0 1px #8a7656; color: #ff981f; font: 12px var(--pxb); text-shadow: 1px 1px 0 #000; cursor: pointer; }
.lst-btns button:hover, .ui-btn:hover { color: #fff; }
.mus-now { text-align: center; font: 12px var(--px); color: #ff981f; margin: 2px 0 4px; text-shadow: 1px 1px 0 #000; } .mus-now b { color: #00ff00; font-weight: normal; }
.mus-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 2px 0; }
.mus-modes button.is-on { color: #fff; box-shadow: inset 0 0 0 1px #c83820; background: rgba(140, 20, 10, .55); }
/* settings */
.set { display: grid; gap: 4px; padding: 0 2px; }
.set-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; font: 12px var(--px); color: #ff981f; text-shadow: 1px 1px 0 #000; min-height: 22px; }
.bars { display: grid; grid-template-columns: repeat(5, 15px); gap: 2px; }
.bars button { height: 14px; border: 1px solid #000; padding: 0; background: #2a2219; cursor: pointer; }
.bars button.is-on { background: linear-gradient(#ffd84a, #b07a10); }
.tgl { min-width: 54px; height: 20px; border: 1px solid #000; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px #6b5b42; color: #ff3030; font: 12px var(--pxb); text-shadow: 1px 1px 0 #000; cursor: pointer; }
.tgl.is-on { color: #00ff00; }
.set-addr { display: grid; gap: 3px; margin-top: 4px; } .set-addr input { height: 22px; padding: 0 4px; border: 1px solid #000; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px #6b5b42; color: #fff; font: 11px var(--px); min-width: 0; }
.logout { display: grid; gap: 14px; padding: 18px 10px; text-align: center; font: 12px var(--px); color: #ff981f; text-shadow: 1px 1px 0 #000; }
.logout button { height: 40px; }

/* chat */
.chat-box { position: absolute; left: 7px; top: 7px; width: 502px; height: 128px; background: url('/img/tex/parchment.png') 0 0 / 256px, #d6c7a0; box-shadow: inset 0 0 0 1px #1b1610, 0 0 0 1px #6b5b42; overflow: hidden; }
.chat-lines { position: absolute; left: 5px; right: 5px; top: 3px; bottom: 18px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; font: 12px/14px var(--px); color: #000; }
.chat-lines div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 14px; }
.chat-lines .c-name { color: #000; } .chat-lines .c-pub { color: #0000ff; } .chat-lines .c-pm { color: #00ffff; text-shadow: 1px 1px 0 #000; } .chat-lines .c-pmn { color: #00ffff; text-shadow: 1px 1px 0 #000; }
.chat-lines .c-trade { color: #800080; cursor: pointer; } .chat-lines .c-trade:hover { text-decoration: underline; }
.chat-lines .c-warn { color: #ef1020; } .chat-lines .c-good { color: #006000; } .chat-lines .c-news { color: #7f0000; }
.chat-in { position: absolute; left: 5px; right: 5px; bottom: 2px; height: 15px; border-top: 1px solid rgba(0, 0, 0, .35); font: 12px/15px var(--px); color: #000; white-space: nowrap; overflow: hidden; }
.chat-in b { font-weight: normal; } .chat-in #chat-text { color: #0000ff; } .caret { font-style: normal; color: #0000ff; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chat-input { position: fixed; left: -1000px; top: 0; width: 10px; opacity: 0; }
.chat-tabs { position: absolute; left: 4px; bottom: 3px; width: 508px; height: 24px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.ct { border: 1px solid #000; background: linear-gradient(#4f4332, #2f271c); box-shadow: inset 0 0 0 1px #7a6a4e; color: #fff; font: 11px/1 var(--px); text-shadow: 1px 1px 0 #000; cursor: pointer; display: grid; align-content: center; gap: 1px; padding: 0; }
.ct small { font: 11px var(--px); color: #00ff00; } .ct small.off { color: #ff3030; } .ct small.fr { color: #ffff00; }
.ct.is-on { background: linear-gradient(#6a2a18, #3a1208); box-shadow: inset 0 0 0 1px #c84a28; }
.ct:hover { filter: brightness(1.2); }
/* dialogue (in place of the chat lines) */
.dlg { position: absolute; inset: 0; display: none; background: url('/img/tex/parchment.png') 0 0 / 256px, #d6c7a0; }
.dlg.is-on { display: block; }
.dlg-head { position: absolute; top: 14px; width: 96px; height: 96px; }
.dlg-head.l { left: 10px; } .dlg-head.r { right: 10px; }
.dlg-txt { position: absolute; top: 10px; bottom: 26px; display: grid; align-content: center; justify-items: center; gap: 4px; text-align: center; font: 12px/16px var(--px); color: #000; }
.dlg-txt.l { left: 116px; right: 16px; } .dlg-txt.r { left: 16px; right: 116px; } .dlg-txt.c { left: 16px; right: 16px; }
.dlg-name { font: 12px var(--pxb); color: #800000; }
.dlg-cont { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 12px var(--px); color: #0000ff; cursor: pointer; }
.dlg-cont:hover { color: #fff; text-shadow: 1px 1px 0 #000; }
.dlg-opts { display: grid; gap: 3px; }
.dlg-opt { font: 12px var(--px); color: #000; cursor: pointer; }
.dlg-opt:hover { color: #fff; text-shadow: 1px 1px 0 #000; }
.dlg-icon { width: 34px; height: 34px; background: var(--ic) center / contain no-repeat; }
.dlg.is-lvl .dlg-name { color: #000080; }

/* the view: hover text, the menu, the Wilds HUD, interfaces */
.hover { position: absolute; left: 4px; top: 3px; font: 12px var(--pxb); color: #fff; text-shadow: 1px 1px 0 #000; white-space: nowrap; pointer-events: none !important; max-width: 500px; overflow: hidden; }
.hover .t-npc { color: #ffff00; } .hover .t-obj { color: #00ffff; } .hover .t-item { color: #ff9040; } .hover .t-pl { color: #fff; } .hover .t-more { color: #fff; }
.menu { position: absolute; display: none; z-index: 20; background: #5d5447; border: 1px solid #000; box-shadow: inset 0 0 0 1px #5d5447, 2px 2px 0 rgba(0, 0, 0, .35); padding: 0 0 2px; min-width: 110px; pointer-events: auto; }
.menu.is-on { display: block; }
.menu .mh { background: #000; color: #5d5447; font: 12px var(--pxb); padding: 2px 4px 1px; margin: 1px 1px 2px; }
.menu .mo { padding: 1px 6px 1px 4px; font: 12px var(--pxb); color: #fff; text-shadow: 1px 1px 0 #000; white-space: nowrap; cursor: pointer; }
.menu .mo:hover { color: #ffff00; } .menu .mo .t-npc { color: #ffff00; } .menu .mo .t-obj { color: #00ffff; } .menu .mo .t-item { color: #ff9040; }
.wl-hud { position: absolute; right: 8px; bottom: 6px; display: none; grid-template-columns: 30px auto; grid-template-rows: auto auto auto; column-gap: 4px; align-items: center; pointer-events: none !important; font: 12px var(--pxb); color: #ffff00; text-shadow: 1px 1px 0 #000; text-align: right; }
.wl-hud.is-on { display: grid; }
.wl-skull { grid-row: 1 / span 3; width: 28px; height: 30px; background: var(--ic-wskull) center / contain no-repeat; }
.wl-hud b { font-weight: normal; } .wl-hud span { color: #ff981f; font-family: var(--px); } #wl-worth { color: #00ff00; }
.hold { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); width: 220px; padding: 6px 10px 7px; display: none; text-align: center; background: rgba(30, 24, 17, .9); border: 1px solid #000; box-shadow: inset 0 0 0 1px #8a7656; font: 12px var(--pxb); color: #ffff00; text-shadow: 1px 1px 0 #000; pointer-events: none !important; }
.hold.is-on { display: block; }
.hold-bar { height: 12px; margin: 5px 0 3px; border: 1px solid #000; background: #3a0d08; }
.hold-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#5aea3c, #20901a); }
.hold span { color: #fff; font-family: var(--px); }
.toast { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); padding: 4px 10px; display: none; background: rgba(0, 0, 0, .7); border: 1px solid #6b5b42; font: 12px var(--pxb); color: #ffff00; text-shadow: 1px 1px 0 #000; pointer-events: none !important; white-space: nowrap; }
.toast.is-on { display: block; }
.ifaces { position: absolute; inset: 0; pointer-events: none !important; }
.if { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: auto; background: url('/img/tex/frame.png') 0 0 / 128px, #3e3529; border: 1px solid #000; box-shadow: inset 0 0 0 1px #8c7b5c, inset 0 0 0 3px #2a2219, inset 0 0 0 4px #6b5b42, 0 6px 20px rgba(0, 0, 0, .6); padding: 8px; font: 12px var(--px); color: #ff981f; text-shadow: 1px 1px 0 #000; }
.if-t { position: relative; text-align: center; font: 12px var(--pxb); color: #ff981f; margin: 0 22px 6px; }
.if-x { position: absolute; right: 6px; top: 5px; width: 18px; height: 18px; border: 1px solid #000; background: linear-gradient(#8a2a18, #4a0f06); box-shadow: inset 0 0 0 1px #d0583a; color: #fff; font: 12px/14px var(--pxb); padding: 0; cursor: pointer; text-shadow: 1px 1px 0 #000; }
.if-x:hover { filter: brightness(1.3); }
.if-grid { display: grid; grid-template-columns: repeat(10, 42px); grid-auto-rows: 36px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px #000, inset 1px 1px 0 1px #5d5241; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5b42 #1b1610; }
.if-row { display: flex; gap: 6px; justify-content: center; margin-top: 6px; align-items: center; }
.if-row .ui-btn { min-width: 86px; padding: 0 6px; }
.if-row .ui-btn.is-on { color: #fff; box-shadow: inset 0 0 0 1px #c83820; background: rgba(140, 20, 10, .55); }
.trade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trade .if-grid { grid-template-columns: repeat(4, 42px); height: 182px; }
.trade h4 { margin: 0 0 3px; font: 12px var(--pxb); font-weight: normal; color: #ff981f; text-align: center; }
.tr2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr2 .lst { height: 170px; }
.smith { display: grid; grid-template-columns: repeat(6, 70px); gap: 3px; }
.sm-it { height: 62px; display: grid; justify-items: center; align-content: center; gap: 1px; border: 1px solid #000; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px #5d5241; cursor: pointer; font: 11px var(--px); color: #ff981f; padding: 2px; }
.sm-it canvas { width: 36px; height: 32px; }
.sm-it.is-low { opacity: .45; } .sm-it .b-ok { color: #00ff00; } .sm-it .b-no { color: #ff3030; }
.sm-it:hover { box-shadow: inset 0 0 0 1px #c8a040; }
.journal { width: 420px; color: #000; background: url('/img/tex/parchment.png') 0 0 / 256px, #d6c7a0; text-shadow: none; padding: 14px 22px; }
.journal .if-t { color: #800000; }
.journal p { margin: 4px 0; font: 12px/16px var(--px); text-align: center; } .journal s { color: #5a4a2a; }
.warn { width: 400px; text-align: center; }
.warn p { margin: 6px 0; font: 12px/16px var(--px); color: #ff981f; } .warn p b { color: #ff3030; font-weight: normal; }
.stats-box { width: 300px; } .stats-box .lst { height: 210px; }

/* phone: the view fills the screen, the minimap top right, the chat bottom left, a bar of big buttons opens the same panels */
.phone-bar { display: none; }
body.is-phone .gf { transform: none !important; width: 100vw; height: 100vh; position: fixed; }
body.is-phone .gf::before, body.is-phone .gf::after { display: none; }
body.is-phone .gf-view { left: 0; top: 0; width: 100vw; height: 100vh; box-shadow: none; }
body.is-phone .gf-map { left: auto; right: 0; top: env(safe-area-inset-top, 0px); transform: scale(.82); transform-origin: top right; background: none; box-shadow: none; }
body.is-phone .gf-chat { left: 0; top: auto; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); transform: scale(var(--pk, .72)); transform-origin: bottom left; background: none; box-shadow: none; }
body.is-phone .gf-chat .chat-box { opacity: .93; }
body.is-phone .gf-chat.is-min .chat-box { height: 50px; } body.is-phone .gf-chat.is-min .chat-lines { bottom: 18px; } body.is-phone .gf-chat.is-min .chat-tabs { display: none; }
body.is-phone .gf-side { left: auto; right: 0; top: auto; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); transform: scale(var(--sk, 1)); transform-origin: bottom right; display: none; z-index: 6; box-shadow: 0 0 0 1px #000, 0 8px 30px rgba(0, 0, 0, .7); }
body.is-phone .gf-side.is-open { display: block; }
body.is-phone .hover { display: none; }
body.is-phone .phone-bar { display: grid; position: fixed; left: 0; right: 0; bottom: 0; height: calc(58px + env(safe-area-inset-bottom, 0px)); padding: 4px 4px env(safe-area-inset-bottom, 0px); grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; z-index: 7; pointer-events: auto;
  background: url('/img/tex/frame.png') 0 0 / 128px, #3e3529; box-shadow: inset 0 1px 0 #6b5b42, 0 -1px 0 #000; }
.pb-btn { display: grid; justify-items: center; align-content: center; gap: 2px; border: 1px solid #000; border-radius: 6px; background: url('/img/tex/frame.png') center / 128px; box-shadow: inset 0 0 0 1px #6b5b42; color: #ff981f; font: 10px var(--px); text-shadow: 1px 1px 0 #000; padding: 0; }
.pb-btn i { width: 26px; height: 26px; background: var(--ic) center / contain no-repeat; filter: drop-shadow(1px 1px 0 #000); }
.pb-btn.is-on { background: url('/img/tex/frame.png') center / 128px, #6a2018; box-shadow: inset 0 0 0 1px #b8321e, inset 0 0 10px rgba(220, 40, 20, .55); color: #fff; }
body.is-phone .ifaces .if { transform: translate(-50%, -50%) scale(var(--ik, 1)); }
body.is-phone .wl-hud { right: 8px; bottom: auto; top: 150px; }
body.is-phone .hold { top: 40%; }

/* RESIZABLE (wide screens, Options: Screen): the world fills the window and the frame's pieces sit on it. main.js scales .gf
   as one piece (--k), so every number inside the pieces stays a frame pixel. */
body.is-wide .gf { transform-origin: 0 0; }
body.is-wide .gf::before, body.is-wide .gf::after { display: none; }
body.is-wide .gf-view { left: 0; top: 0; width: 100%; height: 100%; box-shadow: none; }
body.is-wide .gf-map { left: auto; right: 0; top: 0; background: none; box-shadow: none; }
body.is-wide .gf-map::before { content: ''; position: absolute; left: 50px; top: -6px; width: 178px; height: 178px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 0, 0, .0) 52%, rgba(20, 15, 10, .55) 60%, transparent 72%); pointer-events: none; }
body.is-wide .gf-side { left: auto; right: 0; top: auto; bottom: 0; border-radius: 6px 0 0 0; box-shadow: inset 1px 1px 0 #1b1610, inset 2px 2px 0 #6b5b42, -2px -2px 0 rgba(0, 0, 0, .5), 0 0 24px rgba(0, 0, 0, .55); }
body.is-wide .gf-chat { left: 0; top: auto; bottom: 0; background: none; box-shadow: none; }
body.is-wide .gf-chat .chat-box { background-color: rgba(214, 199, 160, .9); box-shadow: inset 0 0 0 1px #1b1610, 0 0 0 1px #6b5b42, 0 0 18px rgba(0, 0, 0, .45); }
body.is-wide .gf-chat .chat-tabs { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
body.is-wide .wl-hud { right: 258px; bottom: auto; top: 8px; }
body.is-wide .hover { left: 8px; top: 6px; }
body.is-wide .toast { top: 56px; }
body.s-game.is-wide::before { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .35)); z-index: 3; }

/* ---------------------------------------------------------------- Greenhorn Isle: the instruction box, flashing tabs, hints, the crossing */
.tutbox { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 340px; display: none; padding: 5px 12px 10px; z-index: 4; pointer-events: none; text-align: center;
  background: url('/img/tex/parchment.png') 0 0 / 256px, #d6c7a0; border: 2px solid #3e3529; box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, .5); }
.tutbox.is-on { display: block; }
.tb-top { display: flex; justify-content: space-between; font: 11px var(--pxb); color: #6a3410; letter-spacing: .02em; }
.tb-top span { font: 11px var(--px); color: #5a4a30; }
.tb-t { font: 13px var(--pxb); color: #800000; margin-top: 1px; }
.tb-x { font: 12px/15px var(--px); color: #000; margin-top: 2px; }
.tb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .38); }
.tb-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#7ae05a, #2a8a1a); transition: width .6s ease-out; }
.tutbox.is-ok { animation: tbok .8s ease-out; }
@keyframes tbok { 0% { box-shadow: 0 0 0 1px #000, 0 0 0 0 rgba(122, 224, 90, .95); } 100% { box-shadow: 0 0 0 1px #000, 0 0 0 16px rgba(122, 224, 90, 0); } }
.tab.is-flash { animation: tabflash 1s steps(1) infinite; }
@keyframes tabflash { 50% { background: url('/img/tex/frame.png') center / 128px, #8a2a10; box-shadow: inset 0 0 0 1px #1b1610, inset 0 0 0 2px #ff7a2a, inset 0 0 12px rgba(255, 120, 40, .8); } }
.pb-btn.is-flash { animation: pbflash 1s steps(1) infinite; }
@keyframes pbflash { 50% { background: #8a2a10; box-shadow: inset 0 0 0 2px #ff7a2a; } }
.slot.is-hint::after { content: ''; position: absolute; inset: 1px 3px; border: 2px solid #ffff00; border-radius: 3px; animation: slothint 1s ease-in-out infinite; pointer-events: none; }
@keyframes slothint { 50% { border-color: rgba(255, 255, 0, .2); } }
.orb-run.is-flash i { animation: orbflash 1s steps(1) infinite; }
@keyframes orbflash { 50% { box-shadow: 0 0 0 2px #ff7a2a, 0 0 10px #ff7a2a; } }
.sail { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 62%, #24486e, #050a14 78%); }
.sail.is-on { animation: sail 3.4s ease-in-out forwards; }
.sail div { text-align: center; }
.sail b { display: block; font: 30px var(--pxb); color: #f0e6c8; text-shadow: 2px 2px 0 #000; }
.sail span { display: block; margin-top: 8px; font: 17px var(--px); color: #c8d8e8; text-shadow: 1px 1px 0 #000; }
@keyframes sail { 0% { opacity: 1; } 62% { opacity: 1; } 100% { opacity: 0; } }      /* on at once: the jump to the mainland happens under it */
.spells .gi.is-on { box-shadow: inset 0 0 0 2px #ffff00, inset 0 0 8px rgba(255, 255, 0, .5); }
.sp-hint { color: #ffff00 !important; }
.tip .ok { color: #006000; } .tip .no { color: #a00000; }
.cb-auto { margin: 8px 8px 0; width: calc(100% - 16px); height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #000; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px #6b5b42; color: #ff981f; font: 12px var(--pxb); text-shadow: 1px 1px 0 #000; cursor: pointer; }
.cb-auto i { width: 22px; height: 22px; background: var(--ic) center / contain no-repeat; }
.cb-auto.is-on { background: rgba(30, 50, 140, .5); box-shadow: inset 0 0 0 1px #5a7ae8; color: #fff; }
.ac-list { display: grid; gap: 4px; margin-top: 6px; }
.ac-sp { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 1px solid #000; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px #6b5b42; color: #ff981f; font: 12px var(--pxb); text-shadow: 1px 1px 0 #000; cursor: pointer; text-align: left; }
.ac-sp i { width: 22px; height: 22px; background: var(--ic) center / contain no-repeat; }
.ac-sp em { font: 11px var(--px); color: #c8b890; font-style: normal; }
.ac-sp.is-on { box-shadow: inset 0 0 0 2px #ffff00; }
body.is-wide .tutbox { bottom: auto; top: 8px; width: 420px; }
body.is-phone .tutbox { position: fixed; bottom: auto; top: calc(6px + env(safe-area-inset-top, 0px)); width: min(94vw, 420px); transform: translateX(-50%) scale(var(--pk, .9)); transform-origin: top center; }

/* ---------------------------------------------------------------- the Exchange */
.if.ge { width: 470px; }
.ge-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 6px 0; }
.ge-slot { position: relative; height: 82px; padding: 4px 6px; display: grid; align-content: start; gap: 1px; border: 1px solid #000; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px #6b5b42; font: 11px var(--px); color: #ff981f; text-shadow: 1px 1px 0 #000; }
.ge-slot canvas { position: absolute; right: 4px; top: 4px; width: 36px; height: 32px; }
.ge-slot b { font: 12px var(--pxb); } .ge-slot.is-buy b { color: #7ae05a; } .ge-slot.is-sell b { color: #ffb040; }
.ge-slot .ge-n, .ge-slot .ge-p { color: #e8d8b0; }
.ge-bar { display: block; height: 6px; margin-top: 3px; background: #2a0a06; box-shadow: inset 0 0 0 1px #000; } .ge-bar > i { display: block; height: 100%; background: linear-gradient(#e8a030, #a85a10); } .ge-bar.is-done > i { background: linear-gradient(#7ae05a, #2a8a1a); }
.ge-slot .ge-ab { position: absolute; right: 4px; bottom: 4px; min-width: 0; height: 18px; padding: 0 6px; font-size: 11px; }
.ge-slot .ge-empty { color: #8a7a5a; margin-bottom: 4px; } .ge-slot .ui-btn { height: 20px; margin-top: 2px; font-size: 11px; }
.ge-form { min-height: 64px; padding: 4px 2px; }
.ge-search input, .ge-ord input { width: 160px; height: 20px; border: 1px solid #000; background: #1a140e; color: #ffff00; font: 12px var(--px); padding: 0 4px; }
.ge-hits { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.ge-hit { height: 20px; padding: 0 6px; border: 1px solid #000; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px #6b5b42; color: #ff981f; font: 11px var(--px); cursor: pointer; }
.ge-hit:hover { color: #fff; }
.ge-ord { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 12px var(--px); color: #ff981f; text-shadow: 1px 1px 0 #000; }
.ge-ord label { display: flex; align-items: center; gap: 4px; } .ge-ord input { width: 86px; }
.bk-coins { align-items: center; gap: 6px; } .bk-coin { width: 22px; height: 18px; background: radial-gradient(circle at 40% 35%, #fff2a0, #c8960a 70%); border-radius: 50%; box-shadow: 0 0 0 1px #000; }