/* DegenScape: Hoodbridge, the playable world. A RuneScape-style HUD in the site's stone and parchment. Builds on /styles.css. */
body.play { overflow: hidden; background: #0a1210; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#world { position: fixed; inset: 0; display: block; cursor: default; }
.play .topbar { pointer-events: none; }
.play .topbar > * { pointer-events: auto; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.whoami { font: 700 13px/1 var(--pixel); color: var(--lime); text-shadow: 1px 1px 0 #000; }
body.play:not(.is-playing) .mm, body.play:not(.is-playing) .chat, body.play:not(.is-playing) .side, body.play:not(.is-playing) .hover-text { opacity: 0; pointer-events: none; }
.mm, .chat, .side { transition: opacity .4s ease; }

/* shared stone frame */
.mm, .side, .iface, .ctx, .lvlup, .tip {
  --frame: inset 0 0 0 2px #000, inset 0 0 0 4px var(--stone-hi), inset 0 0 0 5px var(--stone-mid), inset 0 0 0 7px #000;
}

/* ---------- hover text (top-left, RS) ---------- */
.hover-text { position: fixed; left: 16px; top: 56px; z-index: 22; font: 700 15px/1.2 var(--pixel); color: #fff; text-shadow: 1px 1px 0 #000; pointer-events: none; white-space: nowrap; }
.o-v { color: #fff; } .o-more { color: #fff; font-weight: 600; }
.tc-c { color: #00ffff; } .tc-y { color: var(--rs-yellow); } .tc-i { color: #ff9040; } .tc-w { color: #fff; }

/* ---------- minimap ---------- */
.mm { position: fixed; right: 14px; top: 58px; z-index: 20; width: 214px; height: 196px; }
.mm canvas { position: absolute; right: 0; top: 0; width: 172px; height: 172px; border-radius: 50%; background: #0e1612;
  box-shadow: 0 0 0 3px #000, 0 0 0 7px #4b3f30, 0 0 0 9px #000, 0 8px 18px rgba(0,0,0,.6); cursor: crosshair; }
.mm::before { content: ''; position: absolute; right: -7px; top: -7px; width: 186px; height: 186px; border-radius: 50%; background: url('/assets/stone.webp') center / 192px; box-shadow: inset 0 0 0 2px #000; }
.mm__compass { position: absolute; left: 10px; top: -2px; width: 40px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.orb { position: absolute; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: #1a130b; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #6f6150, inset 0 0 0 5px #000, 0 3px 8px rgba(0,0,0,.6); }
.orb svg { position: relative; width: 20px; height: 20px; margin-top: -12px; }
.orb b { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font: 700 14px/1 var(--pixel); color: #00ff00; text-shadow: 1px 1px 0 #000; }
.orb--hp { left: 0; top: 46px; }
.orb--hp.is-low b { color: #ff3b30; }
.orb__fill { position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #c4382c, #6e0f0a 70%); transform-origin: bottom; transition: transform .35s ease; opacity: .85; }
.orb--cb { left: 14px; top: 102px; }
.orb--cb b { color: var(--rs-orange); }

/* ---------- XP drops, level-ups ---------- */
.xpdrops { position: fixed; right: 244px; top: 70px; z-index: 21; width: 120px; height: 150px; pointer-events: none; }
.xpdrop { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 4px; font: 700 15px/1 var(--pixel); color: #fff; text-shadow: 1px 1px 0 #000; animation: xpUp 1.8s cubic-bezier(.22,.8,.3,1) forwards; transform-origin: 100% 50%; }
.xpdrop img { width: 18px; height: 18px; image-rendering: pixelated; }
@keyframes xpUp { 0% { transform: translateY(8px) scale(.7); opacity: 0; } 10% { transform: translateY(0) scale(1.12); opacity: 1; } 18% { transform: translateY(-6px) scale(1); } 78% { opacity: 1; } 100% { transform: translateY(-130px) scale(.96); opacity: 0; } }
.lvlup { position: fixed; left: 50%; top: 110px; z-index: 22; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 16px; max-width: min(520px, calc(100vw - 24px));
  background: linear-gradient(rgba(20,15,10,.92), rgba(14,10,7,.95)), url('/assets/stone.webp') center / 192px; box-shadow: var(--frame), 0 12px 30px rgba(0,0,0,.6); border-radius: 3px; pointer-events: none; }
.lvlup img { width: 40px; height: 40px; image-rendering: pixelated; }
.lvlup b { display: block; font: 900 18px/1.1 var(--serif); color: var(--gold); text-shadow: 1px 1px 0 #000; }
.lvlup span { display: block; margin-top: 3px; font: 600 14px/1.3 var(--pixel); color: var(--text); }
.lvlup.is-in { animation: lvlIn 3.8s ease forwards; }
@keyframes lvlIn { 0% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.96); } 8%, 85% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); } }

/* ---------- chat ---------- */
.chat { position: fixed; left: 10px; bottom: 10px; z-index: 18; width: min(520px, calc(100vw - 300px)); display: grid; grid-template-rows: 1fr auto auto;
  background: linear-gradient(rgba(216,199,160,.94), rgba(196,176,134,.94)); border-radius: 2px;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #6d5a3c, inset 0 0 0 5px #000, 0 8px 22px rgba(0,0,0,.55); font: 600 14px/1.35 var(--pixel); }
.chat__log { list-style: none; margin: 0; padding: 8px 12px 4px; height: 118px; overflow-y: auto; color: #000; scrollbar-width: thin; scrollbar-color: #6d5a3c transparent; user-select: text; -webkit-user-select: text; }
.chat__log li { animation: chatIn .25s ease both; overflow-wrap: anywhere; }
.chat__log .sys { color: #000; }
.chat__log .warn { color: #8a1a00; }
.chat__log .good { color: #005f00; }
.chat__log .npc b { color: #7a0000; }
.chat__log .pub { color: #0000b8; }
.chat__log .trade { color: #800080; }
.chat__log .is-click { cursor: pointer; text-decoration: underline dotted; }
.chat__log .is-click:hover { color: #b000b0; }
.chat__input { display: flex; align-items: center; gap: 6px; margin: 0 8px 4px; padding: 3px 6px; border-top: 1px solid rgba(0,0,0,.45); }
.chat__input label { color: #000; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.chat__input input { flex: 1; min-width: 0; font: 600 14px/1.2 var(--pixel); color: #0000b8; background: transparent; border: 0; padding: 3px 0; }
.chat__input input::placeholder { color: rgba(0,0,0,.45); }
.chat__input input:focus { outline: none; }
.chat__tabs { display: flex; gap: 3px; padding: 0 6px 6px; }
.chat__tabs button { flex: 1; cursor: pointer; border: 0; padding: 5px 4px; font: 700 12px/1 var(--pixel); color: var(--parch); border-radius: 2px;
  background: url('/assets/stone.webp') center / 128px, #3a2e1f; background-blend-mode: multiply; box-shadow: inset 0 0 0 1px #000, inset 1px 1px 0 2px rgba(255,236,190,.1); text-shadow: 1px 1px 0 #000; }
.chat__tabs button:hover { color: #fff; }
.chat__tabs button.is-on { color: var(--rs-yellow); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold-deep); }

/* ---------- dialogue (in the chat box's place) ---------- */
.dialog { position: fixed; left: 10px; bottom: 10px; z-index: 24; width: min(520px, calc(100vw - 300px)); min-height: 180px; display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: center; padding: 12px 16px 12px 10px; cursor: pointer;
  background: linear-gradient(rgba(216,199,160,.98), rgba(196,176,134,.98)); border-radius: 2px;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #6d5a3c, inset 0 0 0 5px #000, 0 10px 26px rgba(0,0,0,.6); animation: panelIn .25s ease both; }
.dialog__face { width: 116px; height: 140px; display: grid; place-items: end center; overflow: hidden; border-radius: 2px; background: radial-gradient(ellipse at 50% 80%, rgba(0,0,0,.18), transparent 70%); }
.dialog__img { max-width: 116px; max-height: 140px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
canvas.dialog__img { width: 116px; height: 116px; }
.dialog__text { display: grid; gap: 6px; text-align: center; }
.dialog__name { font: 700 16px/1.1 var(--pixel); color: #7a0000; }
.dialog__text p { margin: 0; font: 600 16px/1.35 var(--pixel); color: #000; min-height: 44px; }
.dialog__next { justify-self: center; border: 0; background: none; cursor: pointer; font: 700 14px/1 var(--pixel); color: #0000b8; padding: 6px 8px; }
.dialog__next:hover { color: #0000ff; text-decoration: underline; }

/* ---------- side panel ---------- */
.side { position: fixed; right: 10px; bottom: 10px; z-index: 19; width: 252px; display: flex; flex-direction: column; border-radius: 3px;
  background: linear-gradient(rgba(34,26,17,.9), rgba(20,15,10,.94)), url('/assets/stone.webp') center / 192px; box-shadow: var(--frame), 0 10px 26px rgba(0,0,0,.6); padding: 7px; }
.side__tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 2px 2px 6px; }
.side__tabs button { height: 36px; cursor: pointer; border: 0; border-radius: 3px; display: grid; place-items: center; padding: 0;
  background: url('/assets/stone.webp') center / 128px, #4b3f30; background-blend-mode: multiply; box-shadow: inset 0 0 0 1px #000, inset 1px 1px 0 2px rgba(255,236,190,.12), inset -1px -1px 0 2px rgba(0,0,0,.35); transition: filter .12s ease, transform .12s ease; }
.side__tabs button:hover { filter: brightness(1.2); }
.side__tabs button:active { transform: translateY(1px); }
.side__tabs button.is-on { background-color: #7a2a14; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #c0512a, inset 1px 1px 0 3px rgba(255,200,150,.18); }
.side__tabs svg { width: 22px; height: 22px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.6)); }
.only-narrow { display: none !important; }
.side__body { height: 318px; position: relative; overflow: hidden; }
.pane { height: 100%; overflow-y: auto; padding: 4px 4px 2px; color: var(--text); scrollbar-width: thin; scrollbar-color: var(--stone-hi) transparent; }
.pane__title { margin: 2px 0 6px; text-align: center; font: 700 15px/1.2 var(--pixel); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.pane__sub { margin: -2px 0 8px; text-align: center; font: 600 13px/1 var(--pixel); color: var(--muted); }
.pane__h4 { margin: 12px 0 6px; font: 700 13px/1 var(--pixel); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.pane__note { margin: 8px 2px; font: 400 14px/1.35 var(--fell); color: var(--parch); }
.pane__note b { color: var(--lime); font-family: var(--pixel); }
.pane__foot { margin: 8px 0 0; text-align: center; font: 600 13px/1.4 var(--pixel); color: var(--muted); }
.pane__foot b { color: var(--rs-yellow); }

/* inventory and every item grid */
.inv { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(7, 1fr); gap: 2px 4px; height: 100%; padding: 2px 6px; }
.it { position: relative; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; border-radius: 3px; min-height: 0; -webkit-tap-highlight-color: transparent; }
.it img { width: 36px; height: 36px; image-rendering: pixelated; pointer-events: none; }
.it:hover:not(.is-empty) { background: rgba(255,236,190,.08); }
.it:active:not(.is-empty) img { transform: translateY(1px); }
.it.is-empty { cursor: default; }
.it.is-out img { opacity: .4; }
.stk { position: absolute; left: 1px; top: 0; font: 700 12px/1 var(--pixel); text-shadow: 1px 1px 0 #000; pointer-events: none; }
.st-y { color: #ffff00; } .st-k { color: #fff; } .st-m { color: #00ff80; }

/* equipment */
.doll { position: relative; display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(4, 48px); gap: 8px 14px; justify-content: center; margin: 4px 0 10px; }
.doll__body { position: absolute; left: 50%; top: 22px; width: 2px; height: 180px; transform: translateX(-50%); background: rgba(0,0,0,.4); z-index: -1; box-shadow: -60px 72px 0 0 transparent; }
.eqslot { width: 48px; height: 48px; border: 0; cursor: pointer; border-radius: 3px; display: grid; place-items: center; position: relative;
  background: #2a2016; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #5b4b36, inset 0 0 12px rgba(0,0,0,.6); }
.eqslot:hover:not(.is-empty) { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--lime), inset 0 0 12px rgba(0,0,0,.6); }
.eqslot img { width: 36px; height: 36px; image-rendering: pixelated; }
.eqslot .ghostico { opacity: .16; filter: grayscale(1) brightness(1.5); }
.eqslot.is-empty { cursor: default; }
.bonus { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; padding: 8px 10px; background: rgba(0,0,0,.3); border-radius: 3px; box-shadow: inset 0 0 0 1px #000; }
.bonus div { display: flex; justify-content: space-between; font: 600 13px/1.3 var(--pixel); }
.bonus dt { color: var(--rs-orange); } .bonus dd { margin: 0; color: var(--rs-yellow); }

/* skills */
.skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.skill { display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 38px; padding: 0 6px 0 4px; border-radius: 3px; cursor: default;
  background: linear-gradient(#3c3226, #2a2016); box-shadow: inset 0 0 0 1px #000, inset 1px 1px 0 2px rgba(255,236,190,.08); }
.skill:hover, .skill:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold-deep); }
.skill img { width: 24px; height: 24px; image-rendering: pixelated; }
.skill__lv { font: 700 13px/1 var(--pixel); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.skill__lv i { font-style: normal; color: var(--muted); margin: 0 1px; }
.skill--total { justify-content: center; flex-direction: column; gap: 3px; font: 600 11px/1 var(--pixel); color: var(--rs-yellow); }
.skill--total b { font-size: 14px; }
.tip { position: fixed; z-index: 60; padding: 8px 10px; max-width: 230px; pointer-events: none; font: 600 13px/1.4 var(--pixel); color: #000; background: #ffffa0; box-shadow: 0 0 0 1px #000, 0 4px 10px rgba(0,0,0,.5); border-radius: 1px; }

/* combat */
.cstyles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cstyle, .spell { cursor: pointer; border: 0; border-radius: 3px; padding: 8px 6px; display: grid; justify-items: center; gap: 3px; color: var(--rs-yellow);
  background: url('/assets/stone.webp') center / 128px, #4b3f30; background-blend-mode: multiply; box-shadow: inset 0 0 0 1px #000, inset 1px 1px 0 2px rgba(255,236,190,.12), inset -1px -1px 0 2px rgba(0,0,0,.35); }
.cstyle b, .spell b { font: 700 13px/1.1 var(--pixel); text-shadow: 1px 1px 0 #000; }
.cstyle small, .spell small { font: 600 11px/1 var(--pixel); color: var(--muted); }
.cstyle:hover, .spell:hover { filter: brightness(1.2); }
.cstyle.is-on, .spell.is-on { background-color: #7a2a14; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #c0512a; }
.spells { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.spell img { width: 28px; height: 28px; image-rendering: pixelated; }
.spell.is-locked { filter: grayscale(.8) brightness(.7); }
.pane__note--auto { text-align: center; font-size: 13px; }

/* emotes */
.emotes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; }
.emotes button { height: 58px; cursor: pointer; border: 0; border-radius: 3px; font: 700 14px/1 var(--pixel); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000;
  background: url('/assets/stone.webp') center / 128px, #4b3f30; background-blend-mode: multiply; box-shadow: inset 0 0 0 1px #000, inset 1px 1px 0 2px rgba(255,236,190,.12), inset -1px -1px 0 2px rgba(0,0,0,.35); transition: filter .12s ease, transform .12s ease; }
.emotes button:hover { filter: brightness(1.25); color: #fff; }
.emotes button:active { transform: translateY(2px); }

/* settings */
.set { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; font: 600 13px/1.3 var(--pixel); color: var(--text); cursor: pointer; }
.set input[type=range] { flex: 1; accent-color: var(--lime); }
.set--check { justify-content: flex-start; }
.set--check input { width: 18px; height: 18px; accent-color: var(--lime); }
.set--music { flex-wrap: wrap; cursor: default; }
.set--music b { color: var(--rs-yellow); }
.set--music small { flex-basis: 100%; font: 400 13px/1.3 var(--fell); color: var(--muted); }

/* ---------- interfaces (bank, shop, trade, menus) ---------- */
.iface { position: fixed; z-index: 23; left: 14px; top: 86px; width: min(560px, calc(50vw - 60px)); max-height: calc(100vh - 310px); display: flex; flex-direction: column; border-radius: 3px; padding: 10px 12px 12px;
  background: linear-gradient(rgba(34,26,17,.93), rgba(20,15,10,.96)), url('/assets/stone.webp') center / 256px; box-shadow: var(--frame), 0 20px 50px rgba(0,0,0,.7); animation: panelIn .25s ease both; }
.iface::before, .iface::after { content: ''; position: absolute; width: 14px; height: 14px; top: -3px; background: radial-gradient(circle at 40% 35%, #f7dd8a, var(--gold-deep) 55%, #4a3208 75%); border-radius: 50%; box-shadow: 0 0 0 2px #000; }
.iface::before { left: -3px; } .iface::after { right: -3px; }
.iface__head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 8px; border-bottom: 2px solid #000; box-shadow: 0 2px 0 rgba(255,236,190,.08); margin-bottom: 8px; }
.iface__head h2 { flex: 1; margin: 0; text-align: center; font: 900 19px/1.15 var(--serif); background: linear-gradient(#fff3c4, var(--gold) 60%, var(--gold-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #000); }
.iface__x { display: grid; place-items: center; width: 30px; height: 30px; border: 0; cursor: pointer; border-radius: 2px; font: 700 15px/1 var(--pixel); color: var(--rs-orange); background: #120d08; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); }
.iface__x:hover { color: #fff; }
.iface__body { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--stone-hi) transparent; }
.iface__lede { margin: 0 0 10px; text-align: center; font: 600 14px/1.3 var(--pixel); color: var(--rs-orange); }
.iface__empty { grid-column: 1 / -1; margin: 18px 0; text-align: center; font: 400 16px/1.4 var(--fell); color: var(--muted); }
.iface__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.6); font: 600 12px/1.3 var(--pixel); color: var(--muted); }
.bank__bar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.bank__bar input { flex: 1; font: 600 14px/1 var(--pixel); color: var(--text); background: #120d08; border: 0; border-radius: 2px; padding: 8px 10px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); user-select: text; }
.bank__bar input:focus { outline: 2px solid var(--lime); outline-offset: 1px; }
.bank__count { font: 700 13px/1 var(--pixel); color: var(--rs-orange); white-space: nowrap; }
.bank__grid, .shop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 4px; padding: 6px; min-height: 120px; background: rgba(0,0,0,.28); border-radius: 3px; box-shadow: inset 0 0 0 1px #000; }
.bank__grid .it, .shop__grid .it { height: 50px; }
.shop__coins { display: inline-flex; align-items: center; gap: 4px; color: var(--rs-yellow); font-size: 14px; white-space: nowrap; }
.shop__coins img { width: 24px; height: 24px; image-rendering: pixelated; }
.make__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.make { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; cursor: pointer; border: 0; border-radius: 3px; padding: 6px 8px;
  background: url('/assets/stone.webp') center / 128px, #4b3f30; background-blend-mode: multiply; box-shadow: inset 0 0 0 1px #000, inset 1px 1px 0 2px rgba(255,236,190,.12); }
.make img { grid-row: span 2; width: 36px; height: 36px; image-rendering: pixelated; }
.make b { font: 700 13px/1.1 var(--pixel); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; }
.make small { font: 600 11px/1.2 var(--pixel); color: var(--muted); }
.make:hover:not(.is-locked) { filter: brightness(1.25); }
.make.is-locked { cursor: not-allowed; filter: grayscale(.9) brightness(.6); }
.trade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade h3 { margin: 0 0 6px; text-align: center; font: 700 14px/1.1 var(--pixel); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; align-content: start; min-height: 170px; padding: 6px; background: rgba(0,0,0,.3); border-radius: 3px; box-shadow: inset 0 0 0 1px #000; }
.trade__grid .it { height: 44px; }
.trade__status { margin: 10px 0 6px; text-align: center; font: 600 14px/1.3 var(--pixel); color: var(--text); }
.trade__status.is-go { color: #00ff00; }
.trade__btns { display: flex; justify-content: center; gap: 12px; }
.rs-btn--go { --b1: #405a12; --b2: #1c2a06; }
.rs-btn--no { --b1: #6a1c12; --b2: #2e0a06; }

/* ---------- context menu (RS "Choose Option") ---------- */
.ctx { position: fixed; z-index: 70; min-width: 150px; max-width: min(360px, calc(100vw - 8px)); max-height: calc(100vh - 8px); overflow-y: auto; padding: 3px; background: #5d5447; border-radius: 1px; box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0,0,0,.6); }
.ctx__title { padding: 3px 6px 4px; background: #000; font: 700 13px/1 var(--pixel); color: #5d5447; }
.ctx button { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; padding: 4px 6px; font: 600 14px/1.2 var(--pixel); background: #000; color: #fff; text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx button + button { border-top: 0; }
.ctx button:hover, .ctx button:focus-visible { outline: none; background: #1a1a1a; }
.ctx button:hover .o-v { color: var(--rs-yellow); }

/* ---------- on-screen joystick (optional) ---------- */
.dpad { display: none; position: fixed; z-index: 21; left: 50%; bottom: 24px; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; touch-action: none; cursor: grab;
  background: radial-gradient(circle, rgba(15,12,8,.35), rgba(15,12,8,.6)); box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px rgba(111,97,80,.8), inset 0 0 0 5px #000, 0 6px 16px rgba(0,0,0,.5); }
body.is-playing.has-dpad .dpad { display: block; }
.dpad__ring { position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed rgba(216,199,160,.35); pointer-events: none; }
.dpad__knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
  background: url('/assets/stone.webp') center / 96px, #5b4b36; background-blend-mode: multiply; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 3px rgba(255,236,190,.18), inset -2px -2px 0 3px rgba(0,0,0,.4), 0 3px 6px rgba(0,0,0,.6); transition: transform .08s linear; }
body.iface-open .dpad, body.dialog-open .dpad { opacity: .35; }

/* ---------- death, net bar ---------- */
.death { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,.2), rgba(20,0,0,.65)); }
.death p { margin: 0; font: 700 clamp(26px, 5vw, 44px)/1 var(--pixel); color: #ff2020; text-shadow: 2px 2px 0 #000, 0 0 30px rgba(0,0,0,.8); }
.death.is-on { animation: deathFade 3.6s ease forwards; }
@keyframes deathFade { 0% { opacity: 0; } 12%, 70% { opacity: 1; } 100% { opacity: 0; } }
.netbar { position: fixed; left: 50%; top: 58px; transform: translateX(-50%); z-index: 45; padding: 8px 14px; font: 700 14px/1.2 var(--pixel); color: var(--rs-yellow); background: rgba(15,12,8,.9); border-radius: 3px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); text-shadow: 1px 1px 0 #000; }

/* ---------- notes (gate, swap booth, amounts) ---------- */
.panel--note { width: min(460px, 100%); }
.panel--note .panel__x { display: grid; place-items: center; }
.note__lede { margin: 0 0 10px; font: 400 18px/1.45 var(--fell); color: var(--parch); text-align: center; }
.note__sub { margin: 0 0 14px; font: 600 13px/1.4 var(--pixel); color: var(--muted); text-align: center; }
.note__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.amount { display: grid; gap: 10px; justify-items: center; font: 600 15px/1.2 var(--pixel); color: var(--rs-yellow); }
.amount input { width: 160px; text-align: center; font: 700 18px/1 var(--pixel); color: var(--text); background: #120d08; border: 0; border-radius: 2px; padding: 9px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); user-select: text; }
.amount input:focus { outline: 2px solid var(--lime); }

/* ---------- entry ---------- */
.panel--entry { width: min(900px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.entry__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.entry__col { background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); padding: 14px; border-radius: 3px; }
.entry__col h3 { margin: 0 0 10px; font: 900 18px/1.1 var(--serif); color: var(--gold); text-shadow: 1px 1px 0 #000; }
.entry__col--ghost { text-align: center; display: grid; justify-items: center; align-content: start; gap: 6px; }
.entry__ghost { height: 150px; width: auto; filter: drop-shadow(0 0 16px rgba(160,255,200,.35)); animation: ghostFloat 3.4s ease-in-out infinite; }
@keyframes ghostFloat { 50% { transform: translateY(-8px); } }
.entry__hint { margin: 6px 0 10px; font: 400 16px/1.4 var(--fell); color: var(--parch); }
.entry__err { margin: 8px 0 0; font: 600 14px/1.3 var(--pixel); color: #ff9a6a; }
.entry__keys { margin: 14px 0 0; text-align: center; font: 600 13px/1.4 var(--pixel); color: var(--muted); }
.hero-pick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 360px; overflow-y: auto; }
.hero-pick button { width: 100%; display: grid; justify-items: center; gap: 5px; padding: 8px 8px 10px; cursor: pointer; background: var(--panel-2); border: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); color: var(--text); transition: transform .15s ease, box-shadow .15s ease; }
.hero-pick button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--lime); }
.card { position: relative; width: 100%; aspect-ratio: 1; border-radius: 2px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #2d3a2a, #0e1310); box-shadow: inset 0 0 0 1px #000; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card .card__char { top: auto; bottom: 7%; left: 50%; width: auto; height: 78%; transform: translateX(-50%); filter: drop-shadow(0 4px 4px rgba(0,0,0,.6)); }
.hero-pick b { font: 700 13px/1.2 var(--pixel); color: var(--rs-yellow); text-align: center; }
.hero-pick small { font: 400 12px/1 var(--pixel); color: var(--muted); }

/* ================= phones ================= */
@media (max-width: 720px) {
  .hover-text, .whoami { display: none; }
  .play .world-pill { font-size: 13px; padding: 7px 10px; }
  .mm { right: 8px; top: 52px; width: 150px; height: 124px; }
  .mm canvas { width: 104px; height: 104px; }
  .mm::before { width: 116px; height: 116px; right: -6px; top: -6px; }
  .mm__compass { left: 18px; top: -4px; width: 30px; height: 30px; }
  .orb { width: 40px; height: 40px; }
  .orb svg { width: 16px; height: 16px; margin-top: -10px; }
  .orb b { font-size: 12px; bottom: 6px; }
  .orb--hp { left: 4px; top: 30px; }
  .orb--cb { left: 18px; top: 74px; }
  .xpdrops { right: 12px; top: 186px; }

  /* the tab bar along the bottom */
  .side { left: 6px; right: 6px; bottom: max(6px, env(safe-area-inset-bottom)); width: auto; padding: 5px; flex-direction: column-reverse; }
  .only-narrow { display: grid !important; }
  .side__tabs { grid-template-columns: repeat(7, 1fr); padding: 3px 0 0; }
  .side__tabs button { height: 42px; }
  .side__body { display: none; height: min(330px, calc(100vh - 290px)); }
  body.sheet-open .side__body { display: block; }
  body.sheet-open .side__tabs { border-top: 2px solid #000; margin-top: 4px; padding-top: 6px; }
  .inv { gap: 2px 8px; padding: 2px 10px; }

  /* chat: a three-line strip above the bar; the chat tab opens the full box */
  .chat { left: 6px; right: 6px; width: auto; bottom: calc(66px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(216,199,160,.82), rgba(196,176,134,.82)); }
  .chat__log { height: 58px; padding: 5px 10px 4px; font-size: 13px; }
  .chat__input, .chat__tabs { display: none; }
  body.sheet-open .chat { display: none; }
  body.sheet-open[data-sheet="chat"] .chat { display: grid; bottom: calc(66px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(216,199,160,.97), rgba(196,176,134,.97)); z-index: 20; }
  body.sheet-open[data-sheet="chat"] .chat__log { height: min(220px, calc(100vh - 380px)); }
  body.sheet-open[data-sheet="chat"] .chat__input { display: flex; }
  body.sheet-open[data-sheet="chat"] .chat__tabs { display: flex; }
  body.sheet-open[data-sheet="chat"] .side__body { display: none; }
  body.sheet-open[data-sheet="chat"] .side__tabs { border-top: 0; margin-top: 0; padding-top: 3px; }
  .chat__input input { font-size: 16px; }

  .dialog { left: 6px; right: 6px; width: auto; bottom: calc(66px + env(safe-area-inset-bottom)); min-height: 150px; grid-template-columns: 84px 1fr; padding: 10px 12px 10px 8px; }
  .dialog__face { width: 84px; height: 110px; }
  .dialog__img { max-width: 84px; max-height: 110px; }
  canvas.dialog__img { width: 84px; height: 84px; }
  .dialog__text p { font-size: 15px; min-height: 40px; }
  body.dialog-open .chat { display: none; }

  /* interfaces sit in the top half; the inventory sheet stays open under them */
  .iface { left: 6px; right: 6px; top: 50px; transform: none; width: auto; max-height: calc(100vh - 56px - min(330px, calc(100vh - 290px)) - 76px); padding: 8px 10px 10px; }
  .iface__head h2 { font-size: 16px; }
  .iface__foot { font-size: 11px; }
  .iface__foot > span:first-child { display: none; }
  .bank__grid, .shop__grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); min-height: 60px; }
  .bank__grid .it, .shop__grid .it { height: 44px; }
  .trade__grid { min-height: 96px; grid-template-columns: repeat(3, 1fr); }
  body.iface-open .chat { display: none; }
  body.iface-open .mm { display: none; }
  .lvlup { top: auto; bottom: calc(150px + env(safe-area-inset-bottom)); left: 8px; right: 8px; transform: none; max-width: none; padding: 10px 12px; }
  .lvlup img { width: 30px; height: 30px; }
  .lvlup b { font-size: 15px; } .lvlup span { font-size: 13px; }
  .lvlup.is-in { animation-name: lvlInM; }
  @keyframes lvlInM { 0% { opacity: 0; transform: translateY(10px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  body.sheet-open .lvlup, body.dialog-open .lvlup { bottom: auto; top: 52px; }
  .xpdrop { font-size: 13px; }

  .dpad { left: auto; right: 10px; margin: 0; bottom: calc(138px + env(safe-area-inset-bottom)); width: 108px; height: 108px; }
  .dpad__ring { inset: 18px; }
  body.sheet-open .dpad { display: none !important; }
  .entry__grid { grid-template-columns: 1fr; }
  .entry__ghost { height: 90px; }
  .hero-pick { grid-template-columns: repeat(2, 1fr); max-height: 300px; }
  .ctx button { padding: 7px 8px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .xpdrop, .lvlup.is-in, .death.is-on, .chat__log li, .entry__ghost, .iface, .dialog { animation-duration: .01s !important; }
  .xpdrop { animation: xpFade 1.8s linear forwards !important; }
  @keyframes xpFade { from { opacity: 1; } to { opacity: 0; } }
}

/* ---------- sound toggle ---------- */
.sound-btn { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; cursor: pointer; border: 0; border-radius: 2px;
  background: url('/assets/stone.webp') center / 96px, #4b3f30; background-blend-mode: multiply;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px rgba(255,236,190,.16), inset -2px -2px 0 2px rgba(0,0,0,.45), 0 3px 0 #000; transition: filter .15s ease, transform .1s ease; }
.sound-btn:hover { filter: brightness(1.2); }
.sound-btn:active { transform: translateY(2px); }
.sound-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.sound-btn svg { width: 22px; height: 22px; }
.sound-btn__x { display: none; }
.sound-btn.is-muted .sound-btn__waves { display: none; }
.sound-btn.is-muted .sound-btn__x { display: inline; }

/* ---------- settings: sound ---------- */
.set--sound { display: grid; grid-template-columns: 58px 1fr auto; cursor: default; align-items: center; gap: 8px; }
.set--sound input[type=range] { width: 100%; }
.set--sound .set__mute { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 var(--pixel); color: var(--muted); cursor: pointer; }
.set--sound .set__mute input { width: 16px; height: 16px; accent-color: var(--lime); }

/* ---------- zone title card ---------- */
.zonecard { position: fixed; left: 50%; top: 22%; z-index: 23; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; pointer-events: none; text-align: center; width: max-content; max-width: calc(100vw - 24px); }
.zonecard b { font: 900 clamp(28px, 4.6vw, 54px)/1.05 var(--serif); letter-spacing: .06em; color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 24px rgba(0,0,0,.85), 0 0 2px #000; }
.zonecard__rule { display: block; width: min(320px, 60vw); height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--lime) 50%, var(--gold) 80%, transparent); box-shadow: 0 1px 0 #000; }
.zonecard.is-on { animation: zoneCard 2.6s ease forwards; }
.zonecard.is-on .zonecard__rule { animation: zoneRule 2.6s ease forwards; }
@keyframes zoneCard { 0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.97); } 18%, 76% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(1.01); } }
@keyframes zoneRule { 0% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; top: 96px; z-index: 44; transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 9px 16px; pointer-events: none;
  font: 400 17px/1.3 var(--fell); font-style: italic; color: #cfe8dc; text-align: center; background: rgba(8,14,12,.82); border-radius: 3px;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(160,255,200,.22), 0 0 24px rgba(120,255,190,.12); text-shadow: 1px 1px 0 #000; }
.toast.is-on { animation: toastIn 3.2s ease forwards; }
@keyframes toastIn { 0% { opacity: 0; transform: translateX(-50%) translateY(-6px); } 10%, 80% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; } }

/* ---------- "You are wrecked": a ghost at the walls ---------- */
#world { transition: filter .7s ease; }
body.is-wrecked #world { filter: grayscale(.9) brightness(.5) contrast(1.05); }
.wrecked { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(ellipse at 50% 50%, rgba(6,10,8,.62) 0%, rgba(4,6,5,.84) 55%, rgba(0,0,0,.96) 100%); }
.wrecked[hidden] { display: none; }
.wrecked.is-on { animation: wreckIn .7s ease both; }
.wrecked__inner { display: grid; justify-items: center; gap: 12px; text-align: center; max-width: 640px; }
.wrecked__ghost { height: 150px; width: auto; filter: grayscale(.3) drop-shadow(0 0 22px rgba(160,255,200,.45)); animation: ghostShiver 2.6s ease-in-out infinite; }
.wrecked__title { margin: 0; font: 900 clamp(34px, 7vw, 76px)/1 var(--serif); letter-spacing: .03em; color: #efe4cc;
  text-shadow: 0 3px 0 #000, 0 0 30px rgba(160,255,200,.25), 0 0 2px #000; animation: wreckTitle .9s cubic-bezier(.2,.9,.3,1.2) both .1s; }
.wrecked__line { margin: 0; font: 400 clamp(18px, 2.4vw, 24px)/1.4 var(--fell); color: var(--parch); text-shadow: 1px 1px 0 #000; }
.wrecked__sub { margin: 0 0 8px; font: 600 14px/1.4 var(--pixel); color: var(--muted); text-shadow: 1px 1px 0 #000; }
.wrecked__btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.rs-btn--lime { --b1: #6f9a0c; --b2: #263a04; color: var(--lime); animation: enterGlow 2.6s ease-in-out infinite; }
.rs-btn--lime:hover { color: #fff; }
@keyframes wreckIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wreckTitle { from { opacity: 0; transform: scale(1.18); letter-spacing: .2em; } to { opacity: 1; transform: none; } }
@keyframes ghostShiver { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-2px, -3px); } 20% { transform: translate(2px, -5px); } 30% { transform: translate(-1px, -4px); } 40% { transform: translate(1px, -6px); } 50% { transform: translate(0, -8px); } 75% { transform: translate(0, -3px); } }

/* ---------- item flying to the pack ---------- */
.fly { position: fixed; left: 0; top: 0; z-index: 30; width: 30px; height: 30px; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.7)); will-change: transform, opacity; }
.side__tabs [data-tab="inv"].is-bump { animation: tabBump .35s ease; }
@keyframes tabBump { 40% { transform: scale(1.18); } }

/* ---------- entry: a Legend picked by link ---------- */
.entry__pick { display: grid; gap: 10px; margin: 0 0 14px; justify-items: center; }
.entry__pick .card { width: 150px; }
.rs-btn--lime.rs-btn--block .rs-btn__title { color: var(--lime); }

@media (max-width: 720px) {
  .zonecard { top: 30%; }
  .zonecard b { font-size: clamp(26px, 8.4vw, 40px); }
  .toast { top: 58px; font-size: 15px; }
  .wrecked__ghost { height: 104px; }
  .wrecked__btns { flex-direction: column; width: 100%; max-width: 320px; }
  .wrecked__btns .rs-btn { width: 100%; }
  .sound-btn { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .zonecard.is-on, .zonecard.is-on .zonecard__rule, .toast.is-on { animation-duration: .01s !important; animation-name: none !important; }
  .wrecked__ghost, .wrecked__title, .wrecked.is-on, .rs-btn--lime { animation: none !important; }
}

/* =====================================================================================================
   v5: quests, the guided start, dialog options, special attack, buffs, the notice board, the swap booth
   ===================================================================================================== */
.side__tabs { grid-template-columns: repeat(7, 1fr); }
.side__tabs [data-tab="quests"].is-bump { animation: tabBump .35s ease; }

/* ---------- special attack orb (third orb on the minimap's arc) ---------- */
.mm { height: 226px; }
button.orb { border: 0; padding: 0; cursor: pointer; font: inherit; }
.orb--spec { left: 42px; top: 152px; }
.orb--spec .orb__fill { background: radial-gradient(circle at 40% 30%, #6fe0c8, #0f6a5a 72%); transform: scaleY(0); }
.orb--spec b { color: #7affe0; }
.orb--spec:hover:not(:disabled) { filter: brightness(1.2); }
.orb--spec:active:not(:disabled) { transform: translateY(1px); }
.orb--spec:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.orb--spec.is-ready { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #6f6150, inset 0 0 0 5px #000, 0 3px 8px rgba(0,0,0,.6), 0 0 0 2px rgba(122,255,224,.35); }
.orb--spec.is-armed { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #f5c542, inset 0 0 0 5px #000, 0 0 14px 3px rgba(245,197,66,.75); animation: specGlow 1.1s ease-in-out infinite; }
.orb--spec.is-armed b { color: var(--rs-yellow); }
.orb--spec.is-off { cursor: not-allowed; filter: grayscale(1) brightness(.62); }
.orb--spec.is-off b { color: #9a9a9a; }
@keyframes specGlow { 50% { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #fff3c4, inset 0 0 0 5px #000, 0 0 22px 6px rgba(245,197,66,.9); } }
.specbar { position: relative; display: block; width: 100%; height: 26px; margin: 10px 0 0; border: 0; padding: 0; cursor: pointer; overflow: hidden; border-radius: 2px; background: #120d08; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); }
.specbar__fill { position: absolute; left: 2px; top: 2px; bottom: 2px; background: linear-gradient(#5fd8bd, #1c7c66); transition: width .35s ease; }
.specbar__t { position: relative; display: block; padding: 0 8px; font: 700 12px/26px var(--pixel); color: #fff; text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.specbar.is-armed { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold); }
.specbar.is-armed .specbar__t { color: var(--rs-yellow); }

/* ---------- buffs under the orbs ---------- */
.buffs { position: absolute; right: 0; top: 100%; margin-top: 4px; display: flex; flex-direction: row-reverse; gap: 4px; }
.buff { position: relative; width: 32px; height: 38px; display: grid; justify-items: center; align-content: start; padding-top: 2px; border-radius: 2px; cursor: default;
  background: linear-gradient(rgba(34,26,17,.92), rgba(20,15,10,.95)); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold-deep), 0 2px 6px rgba(0,0,0,.5); }
.buff img { width: 22px; height: 22px; image-rendering: pixelated; }
.buff i { font: 700 10px/1 var(--pixel); font-style: normal; color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; margin-top: 1px; }

/* ---------- the tutorial objective line and the arrow ---------- */
.objective { position: fixed; left: 50%; top: 14px; z-index: 21; transform: translateX(-50%); max-width: min(560px, calc(100vw - 620px)); padding: 7px 14px 7px 12px; cursor: pointer;
  font: 600 14px/1.25 var(--pixel); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(rgba(34,26,17,.92), rgba(20,15,10,.95)); border-radius: 3px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold-deep), 0 4px 12px rgba(0,0,0,.55); text-shadow: 1px 1px 0 #000; }
.objective::before { content: ''; display: inline-block; width: 9px; height: 9px; margin: 0 7px 1px 0; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 1px #000, 0 0 8px rgba(245,197,66,.7); }
.objective__k { color: var(--rs-yellow); font-weight: 700; }
.objective:hover { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold), 0 4px 12px rgba(0,0,0,.55); }
.hint-arrow { position: fixed; left: -20px; top: -46px; z-index: 17; width: 40px; height: 48px; pointer-events: none; transform-origin: 20px 46px; will-change: transform; }
.hint-arrow__bob { width: 40px; height: 48px; animation: hintBob .9s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(245,197,66,.55)); }
.hint-arrow svg { width: 40px; height: 48px; display: block; }
.hint-arrow.is-edge .hint-arrow__bob { transform: scale(.8); animation-name: hintBobEdge; }
@keyframes hintBob { 0%, 100% { transform: translateY(-10px); } 50% { transform: translateY(0); } }
@keyframes hintBobEdge { 0%, 100% { transform: translateY(-8px) scale(.8); } 50% { transform: translateY(0) scale(.8); } }

/* ---------- quest toast ---------- */
.qtoast { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; top: 60px; z-index: 44; display: flex; align-items: center; gap: 10px; max-width: min(460px, calc(100vw - 24px)); padding: 8px 16px 8px 10px; pointer-events: none;
  background: linear-gradient(rgba(216,199,160,.97), rgba(196,176,134,.97)); border-radius: 2px; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #6d5a3c, inset 0 0 0 5px #000, 0 10px 24px rgba(0,0,0,.55); }
.qtoast img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.qtoast b { display: block; font: 700 14px/1.2 var(--pixel); color: #7a0000; }
.qtoast span { display: block; font: 600 14px/1.3 var(--pixel); color: #000; }
.qtoast.is-on { animation: qtIn 4.2s ease forwards; }
@keyframes qtIn { 0% { opacity: 0; transform: translateY(-6px); } 8%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; } }
body.has-objective .qtoast, body.has-objective .toast { top: 62px; }
body.has-objective .toast { top: 118px; }

/* ---------- quest complete: the scroll ---------- */
.qdone { position: fixed; inset: 0; z-index: 58; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.72)); }
.qdone[hidden] { display: none; }
.qdone.is-on { animation: wreckIn .35s ease both; }
.qdone.is-on .qdone__scroll { animation: scrollOpen .7s cubic-bezier(.2,.9,.3,1.1) both; }
.qdone__scroll { position: relative; width: min(520px, 100%); padding: 18px 0; transform-origin: 50% 50%; }
.qdone__rod { position: absolute; left: -10px; right: -10px; height: 22px; border-radius: 11px; background: linear-gradient(#e6c989, #a8844a 45%, #6d5028); box-shadow: 0 0 0 2px #000, 0 4px 8px rgba(0,0,0,.5); }
.qdone__rod::before, .qdone__rod::after { content: ''; position: absolute; top: -3px; width: 16px; height: 28px; border-radius: 5px; background: radial-gradient(circle at 40% 35%, #f7dd8a, var(--gold-deep) 60%, #4a3208); box-shadow: 0 0 0 2px #000; }
.qdone__rod::before { left: -8px; } .qdone__rod::after { right: -8px; }
.qdone__rod--t { top: 0; } .qdone__rod--b { bottom: 0; }
.qdone__sheet { display: grid; justify-items: center; gap: 8px; padding: 22px 26px 20px; text-align: center; color: var(--parch-ink);
  background: radial-gradient(ellipse at 50% 40%, #f1e3bd, #dcc690 70%, #c7ac6e); box-shadow: inset 0 0 0 2px #000, inset 0 0 26px rgba(90,60,20,.45); }
.qdone__kicker { margin: 0; font: 900 26px/1 var(--serif); letter-spacing: .04em; color: #7a0000; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.qdone__title { margin: 0; font: 400 20px/1.25 var(--fell); color: #2b1e0e; }
.qdone__grid { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; width: 100%; margin: 6px 0 2px; text-align: left; }
.qdone__art { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.45), rgba(120,90,40,.15) 70%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.qdone__art img { width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.qdone__lbl { margin: 0 0 4px; font: 700 14px/1.2 var(--pixel); color: #7a0000; }
.qdone__rewards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font: 600 14px/1.3 var(--pixel); color: #1d140a; }
.qdone__rewards li { display: flex; align-items: center; gap: 6px; }
.qdone__rewards li img { width: 24px; height: 24px; image-rendering: pixelated; }
.qdone__rewards li b { color: #004d00; }
.qdone__qp { margin: 2px 0 6px; font: 700 15px/1 var(--pixel); color: #2b1e0e; }
.qdone__qp b { color: #7a0000; }
@keyframes scrollOpen { from { opacity: 0; transform: scaleY(.08); } 60% { opacity: 1; } to { opacity: 1; transform: scaleY(1); } }

/* ---------- quest list pane ---------- */
.qpoints { margin-bottom: 4px; }
.qpoints b { color: var(--rs-yellow); }
#paneQuests .pane__title { margin-bottom: 4px; }
.qlist { list-style: none; margin: 0 0 6px; padding: 0 2px; display: grid; gap: 0; }
.qrow { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 2px 6px; font: 600 14px/1.2 var(--pixel); text-shadow: 1px 1px 0 #000; border-radius: 2px; }
.qrow:hover, .qrow.is-sel { background: rgba(255,236,190,.08); }
.qrow.is-sel { box-shadow: inset 2px 0 0 var(--gold); }
.q-none { color: #ff2a1a; } .q-active { color: #ffff00; } .q-done { color: #00e000; } .q-locked { color: #8d887f; }
.qjournal { margin: 2px 2px 4px; padding: 8px 10px 10px; border-radius: 2px; color: #1d140a; text-align: left;
  background: linear-gradient(rgba(216,199,160,.97), rgba(196,176,134,.97)); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #6d5a3c, inset 0 0 0 4px #000; }
.qjournal__name { display: block; font: 700 15px/1.2 var(--pixel); color: #7a0000; }
.qjournal__state { display: inline-block; margin-top: 2px; font: 700 11px/1 var(--pixel); text-shadow: none; }
.qjournal__state.q-none { color: #a01000; } .qjournal__state.q-active { color: #7a5a00; } .qjournal__state.q-done { color: #006000; } .qjournal__state.q-locked { color: #5e5a54; }
.qjournal__giver { display: block; margin-top: 2px; font: 600 12px/1.2 var(--pixel); color: #5a4526; }
.qjournal p { margin: 6px 0 0; font: 400 15px/1.35 var(--fell); color: #1d140a; }

/* ---------- dialog options: "Select an Option" ---------- */
.dialog__opts { grid-column: 1 / -1; display: grid; gap: 4px; justify-items: center; align-content: center; }
.dialog--opts { grid-template-columns: 1fr; cursor: default; }
.dialog--opts .dialog__face, .dialog--opts .dialog__text { display: none; }
.dialog__ask { margin: 0 0 4px; font: 700 16px/1.2 var(--pixel); color: #7a0000; text-align: center; }
.dialog__rows { display: grid; gap: 2px; justify-items: center; width: 100%; }
.dialog__rows.is-two { grid-template-columns: 1fr 1fr; }
.dialog__rows button { border: 0; background: none; cursor: pointer; padding: 5px 12px; font: 600 16px/1.2 var(--pixel); color: #000; border-radius: 2px; max-width: 100%; }
.dialog__rows button i { font-style: normal; color: #5a4526; margin-right: 2px; }
.dialog__rows button:hover, .dialog__rows button:focus-visible { outline: none; color: #fff; background: rgba(0,0,0,.28); text-shadow: 1px 1px 0 #000; }
.dialog__rows button:hover i { color: var(--rs-yellow); }

/* ---------- equipment: the Legend's own powers ---------- */
.legend { margin: 8px 0 2px; display: grid; gap: 6px; padding: 8px 8px 8px 6px; background: rgba(0,0,0,.3); border-radius: 3px; box-shadow: inset 0 0 0 1px #000; }
.legend__row { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: start; }
.legend__row b { font: 700 13px/1.2 var(--pixel); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.legend__cost { font: 600 11px/1 var(--pixel); color: var(--muted); }
.legend__row p { margin: 2px 0 0; font: 400 13px/1.3 var(--fell); color: var(--parch); }
.legend__row--look { align-items: center; }
.legend__ico { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; box-shadow: 0 0 0 1px #000; }
.legend__ico--spec { background: radial-gradient(circle at 40% 30%, #9ff5e0, #1c7c66 70%); }
.legend__ico--charm { background: radial-gradient(circle at 40% 30%, #fff3c4, var(--gold) 45%, var(--gold-deep) 80%); }
.legend__swatch { width: 20px; height: 20px; border-radius: 3px; background: radial-gradient(circle at 40% 30%, #fff, var(--tint) 45%, #000 140%); box-shadow: 0 0 0 1px #000, 0 0 10px var(--tint); }

/* ---------- token holder bits (only once the server sends them) ---------- */
.tokbadge { display: inline-block; width: 11px; height: 11px; margin: 0 4px -1px 0; border-radius: 50%; vertical-align: baseline;
  background: radial-gradient(circle at 38% 32%, #fff6c8, var(--gold) 45%, var(--gold-deep) 85%); box-shadow: 0 0 0 1px #000; }
.bank__token { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; padding: 6px 8px; font: 600 13px/1.2 var(--pixel); color: var(--muted); background: rgba(0,0,0,.28); border-radius: 3px; box-shadow: inset 0 0 0 1px #000; }
.bank__token b { color: var(--rs-yellow); }
.bank__sym { color: var(--gold); }
.ca { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; padding: 6px 6px 6px 10px; border-radius: 2px; background: #120d08; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); }
.ca__k { font: 700 13px/1 var(--pixel); color: var(--gold); }
.ca__v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.2 ui-monospace, 'SFMono-Regular', Menlo, monospace; color: var(--text); user-select: all; -webkit-user-select: all; }
.ca__btn { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; padding: 0; cursor: pointer; color: var(--parch); border-radius: 2px;
  background: url('/assets/stone.webp') center / 96px, #4b3f30; background-blend-mode: multiply; box-shadow: inset 0 0 0 1px #000, inset 1px 1px 0 2px rgba(255,236,190,.12); }
.ca__btn:hover { color: var(--lime); filter: brightness(1.15); }
.ca__btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.ca__done { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 3px 7px; font: 700 12px/1 var(--pixel); color: #000; background: var(--lime); border-radius: 2px; box-shadow: 0 0 0 1px #000; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.ca__btn.is-copied { color: var(--lime); }
.ca__btn.is-copied .ca__done { opacity: 1; }
.swap__bal { margin: 0 0 10px; text-align: center; font: 600 14px/1.3 var(--pixel); color: var(--muted); }
.swap__bal b { color: var(--rs-yellow); }

/* ---------- the notice board (a parchment sheet in the note frame) ---------- */
.panel--board, .panel--swap { width: min(540px, 100%); }
.panel--swap .ca__v { font-size: 12.5px; }
.board { margin: 0 0 14px; padding: 14px 16px 16px; border-radius: 2px; color: #1d140a;
  background: radial-gradient(ellipse at 50% 30%, #f1e3bd, #d8c28c 75%, #c7ac6e); box-shadow: inset 0 0 0 2px #000, inset 0 0 22px rgba(90,60,20,.45), 0 4px 0 rgba(0,0,0,.35); transform: rotate(-.4deg); }
.board__h { margin: 2px 0 8px; text-align: center; font: 900 17px/1 var(--serif); letter-spacing: .05em; color: #7a0000; }
.board__h + .board__t { margin-bottom: 12px; }
.board__t { width: 100%; border-collapse: collapse; font: 600 14px/1.25 var(--pixel); }
.board__t th { padding: 3px 6px; font: 700 12px/1 var(--pixel); color: #5a4526; text-align: right; border-bottom: 2px solid rgba(43,30,14,.55); }
.board__t td { padding: 4px 6px; text-align: right; border-bottom: 1px dashed rgba(43,30,14,.3); }
.board__t .b-name { text-align: left; }
.board__t td.b-name { color: #1d140a; font-weight: 700; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__t .b-rank { color: #7a0000; font-weight: 700; width: 36px; }
.board__t tbody tr:nth-child(1) .b-rank { color: #9a6e12; }
.board__t .b-num { color: #2b1e0e; font-variant-numeric: tabular-nums; }
.board__t .b-empty { text-align: center; font: 400 15px/1.4 var(--fell); color: #5a4526; padding: 12px 6px; }
.board__ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.board__ev li { position: relative; padding-left: 16px; font: 400 15px/1.35 var(--fell); color: #1d140a; }
.board__ev li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 7px; height: 7px; border-radius: 50%; background: #8a1c1c; box-shadow: 0 0 0 1px #000, inset -1px -1px 0 rgba(0,0,0,.3); }

/* ---------- chat: townsfolk lines ---------- */
.chat__log .npcsay b { color: #7a0000; }
.chat__log .advsay { color: #6a4a00; font-weight: 700; }

/* ================= v5 on phones ================= */
@media (max-width: 720px) {
  .side__tabs { grid-template-columns: repeat(8, 1fr); }
  .mm { height: 156px; }
  .orb--spec { left: 40px; top: 112px; }
  .buffs { margin-top: 2px; }
  .buff { width: 28px; height: 34px; }
  .buff img { width: 18px; height: 18px; }
  .xpdrops { top: 250px; }
  .objective { left: 6px; right: 166px; top: 50px; transform: none; max-width: none; padding: 6px 8px; font-size: 12px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .objective::before { width: 7px; height: 7px; margin-right: 5px; }
  body.iface-open .objective { display: none; }
  body.has-objective .qtoast { top: 104px; }
  body.has-objective .toast { top: 104px; }
  .qtoast { top: 58px; }
  .qdone__sheet { padding: 18px 16px 16px; }
  .qdone__kicker { font-size: 22px; }
  .qdone__title { font-size: 18px; }
  .qdone__grid { grid-template-columns: 72px 1fr; gap: 12px; }
  .qdone__art { width: 72px; height: 72px; }
  .qdone__art img { width: 48px; height: 48px; }
  .dialog__rows button { font-size: 15px; padding: 7px 10px; }
  .dialog__rows.is-two { gap: 0; }
  .dialog__rows.is-two button { padding: 5px 6px; }
  .board { padding: 12px 10px 14px; }
  .board__t { font-size: 13px; }
  .board__t th, .board__t td { padding: 3px 4px; }
  .board__t td.b-name { max-width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .hint-arrow__bob, .orb--spec.is-armed, .qdone.is-on, .qdone.is-on .qdone__scroll, .qtoast.is-on { animation: none !important; }
  .hint-arrow.is-edge .hint-arrow__bob { transform: scale(.8); }
}
.dialog { background: linear-gradient(#d8c7a0, #c4b086); }
.play #note { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
  .panel--swap .ca { align-items: flex-start; }
  .panel--swap .ca__k { padding-top: 3px; }
  .panel--swap .ca__v { white-space: normal; word-break: break-all; text-overflow: clip; line-height: 1.35; }
}

/* ================= v6 ================= */
/* ---------- entry: stepping into Hoodbridge as a Legend ---------- */
.panel--entry.is-stepping { width: min(620px, 100%); }
.panel--entry.is-stepping .panel__lede, .panel--entry.is-stepping .entry__grid { display: none; }
.entry__note { margin: 0 0 12px; padding: 8px 10px; font: 600 14px/1.35 var(--pixel); color: var(--rs-yellow); background: rgba(0,0,0,.3); border-radius: 2px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--gold-deep); text-align: center; }
.entry__step { background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); border-radius: 3px; padding: 18px; }
.step { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; }
.step__card { position: relative; width: 150px; box-shadow: inset 0 0 0 1px #000, 0 0 0 2px var(--gold-deep), 0 0 0 4px #000, 0 10px 24px rgba(0,0,0,.6); }
.step__card .card__emblem { inset: 18%; width: 64%; height: 64%; opacity: .9; }
.step__glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,243,196,.28) 48%, transparent 66%); background-size: 260% 100%; animation: stepSheen 2.4s ease-in-out infinite; }
@keyframes stepSheen { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.step__txt { display: grid; gap: 10px; min-width: 0; }
.step__title { margin: 0; text-wrap: balance; font: 900 22px/1.2 var(--serif); color: var(--gold); text-shadow: 1px 1px 0 #000, 0 0 14px rgba(0,0,0,.6); }
.step__title b { color: #fff3c4; }
.step__line { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 15px/1.3 var(--pixel); color: var(--parch); }
.step__spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(204,255,0,.2); border-top-color: var(--lime); box-shadow: 0 0 0 1px #000; animation: stepSpin .9s linear infinite; }
@keyframes stepSpin { to { transform: rotate(360deg); } }
.step__sign { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; font: 400 16px/1.35 var(--fell); color: var(--parch-ink);
  background: linear-gradient(#e6d6ae, #cdb788); border-radius: 2px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #fff3c4, 0 3px 0 rgba(0,0,0,.45); animation: signIn .35s cubic-bezier(.2,.8,.2,1) both; }
.step__sign b { font: 700 15px/1.3 var(--pixel); color: #000; }
.step__sign svg { flex: none; width: 26px; height: 26px; margin-top: 1px; animation: quill 1.6s ease-in-out infinite; transform-origin: 20% 90%; }
@keyframes signIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes quill { 50% { transform: rotate(-9deg) translateY(-1px); } }
.step__pips { list-style: none; display: flex; gap: 6px; margin: 2px 0 0; padding: 0; }
.step__pips li { width: 26px; height: 7px; border-radius: 1px; background: #1a130b; box-shadow: inset 0 0 0 1px #000; }
.step__pips li.is-done { background: var(--gold-deep); }
.step__pips li.is-on { background: var(--lime); box-shadow: inset 0 0 0 1px #000, 0 0 8px rgba(204,255,0,.55); animation: pip 1s ease-in-out infinite; }
@keyframes pip { 50% { opacity: .55; } }
.step--fail .step__card { filter: grayscale(.75) brightness(.7); box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #7a2a14, 0 0 0 4px #000; }
.step--fail .step__title { color: #ff9a6a; }
.step__why { margin: 0; font: 400 17px/1.4 var(--fell); color: var(--parch); }
.step__btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- click-to-walk marker ---------- */
.walkmark { position: fixed; left: 0; top: 0; z-index: 6; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none; color: #ffff00; will-change: transform; }
.walkmark svg { display: block; width: 100%; height: 100%; animation: markIn .22s cubic-bezier(.2,1.6,.4,1) both; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.walkmark.is-red { color: #ff2a1a; }
.walkmark.is-red svg { animation: markNo .45s ease both; }
@keyframes markIn { from { transform: scale(.2); opacity: 0; } }
@keyframes markNo { 0% { transform: scale(1.35); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } 100% { transform: none; } }

/* ---------- the world map ---------- */
.mm__map { position: absolute; right: 2px; top: 160px; width: 38px; height: 38px; padding: 0; border: 0; cursor: pointer; border-radius: 50%; display: grid; place-items: center;
  background: url('/assets/stone.webp') center / 96px, #4b3f30; background-blend-mode: multiply; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--stone-hi), inset 0 0 0 5px #000, 0 3px 8px rgba(0,0,0,.6); }
.mm__map svg { width: 22px; height: 22px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.6)); }
.mm__map:hover { filter: brightness(1.2); }
.mm__map:active { transform: translateY(1px); }
.mm__map[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--gold), inset 0 0 0 5px #000, 0 0 12px rgba(245,197,66,.55); }
.mm__map:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.wmap { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 60px 16px 16px; background: rgba(0,0,0,.45); }
.wmap__frame { --frame: inset 0 0 0 2px #000, inset 0 0 0 4px var(--stone-hi), inset 0 0 0 5px var(--stone-mid), inset 0 0 0 7px #000;
  position: relative; width: min(980px, 100%); height: min(700px, 100%); display: flex; flex-direction: column; padding: 10px 12px 10px; border-radius: 3px;
  background: linear-gradient(rgba(34,26,17,.95), rgba(20,15,10,.97)), url('/assets/stone.webp') center / 256px; box-shadow: var(--frame), 0 20px 50px rgba(0,0,0,.75); animation: panelIn .25s ease both; }
.wmap__frame::before, .wmap__frame::after { content: ''; position: absolute; width: 14px; height: 14px; top: -3px; background: radial-gradient(circle at 40% 35%, #f7dd8a, var(--gold-deep) 55%, #4a3208 75%); border-radius: 50%; box-shadow: 0 0 0 2px #000; }
.wmap__frame::before { left: -3px; } .wmap__frame::after { right: -3px; }
.wmap__view { position: relative; flex: 1; min-height: 0; border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px #8a7458, inset 0 0 0 4px #000; background: #10150f; }
.wmap__view::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 40px 8px rgba(20,12,4,.75); }
.wmap__view canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.wmap__view canvas.is-drag { cursor: grabbing; }
.wmap__zoom { position: absolute; right: 10px; top: 10px; z-index: 1; display: grid; gap: 6px; }
.wmap__zoom button { width: 36px; height: 36px; border: 0; cursor: pointer; border-radius: 3px; display: grid; place-items: center; font: 700 22px/1 var(--pixel); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000;
  background: url('/assets/stone.webp') center / 96px, #4b3f30; background-blend-mode: multiply; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-hi), inset 0 0 0 3px #000, 0 2px 6px rgba(0,0,0,.6); }
.wmap__zoom button:hover { color: #fff; filter: brightness(1.15); }
.wmap__zoom button:active { transform: translateY(1px); }
.wmap__zoom svg { width: 20px; height: 20px; color: var(--rs-yellow); }
.wmap__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 4px 0; font: 600 13px/1.2 var(--pixel); color: var(--text); }
.wmap__foot span { display: inline-flex; align-items: center; gap: 6px; }
.wmap__how { margin-left: auto; font: italic 400 14px/1.2 var(--fell); color: var(--muted); }
.wk { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1.5px #000; }
.wk--me { background: var(--lime); } .wk--hero { background: #ffff00; } .wk--ghost { background: #fff; }
.wk--bank { background: radial-gradient(circle at 50% 45%, #f5c542 45%, #8a5a10 50%, #f5c542 58%); }
.wk--shop { border-radius: 2px 2px 5px 5px; background: #a8743a; }
.wk--quest { width: 10px; border-radius: 0; background: linear-gradient(90deg, #000 2px, #f5c542 2px); clip-path: polygon(0 0, 100% 35%, 18% 70%, 18% 100%, 0 100%); box-shadow: none; }

@media (max-width: 720px) {
  .panel--entry.is-stepping { width: 100%; }
  .step { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .step__card { width: 132px; }
  .step__title { font-size: 19px; }
  .step__line { width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; font-size: 14px; }
  .step__sign { text-align: left; font-size: 15px; }
  .step__pips { justify-content: center; }
  .step__btns { flex-direction: column; width: 100%; }
  .step__btns .rs-btn { width: 100%; }
  .mm__map { right: 0; top: 104px; width: 32px; height: 32px; }
  .mm__map svg { width: 18px; height: 18px; }
  .wmap { padding: calc(52px + env(safe-area-inset-top)) 6px calc(66px + env(safe-area-inset-bottom)); place-items: stretch; }
  .wmap__frame { width: 100%; height: 100%; padding: 8px 8px 8px; }
  .wmap__frame .iface__head h2 { font-size: 17px; }
  .wmap__foot { gap: 4px 10px; font-size: 12px; }
  .wmap__how { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .step__glow, .step__spin, .step__pips li.is-on, .step__sign svg, .walkmark svg { animation: none !important; }
}