/* Firelit stone, parchment and gold: the same look as the iPhone app. */
:root {
  color-scheme: dark;
  --night: #14110d;
  --panel: #2a2119;
  --panel-2: #372b1f;
  --edge: #5f4a30;
  --edge-hi: #a3834f;
  --ink: #f1e3c0;
  --ink-dim: #b8a680;
  --gold: #ffd23a;
  --ember: #ff7a2e;
  --ember-deep: #7a2a1a;
  --good: #5fd35f;
  --bad: #ff4a3a;
  --cyan: #56dce8;
  --parchment: #e6d4a4;
  --parchment-ink: #2a1d0e;
  --title: 'IM Fell English SC', 'Iowan Old Style', Georgia, serif;
  --ui: 'Alegreya Sans', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--night); }
body { margin: 0; background: var(--night); color: var(--ink); font: 500 16px/1.35 var(--ui); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
[hidden] { display: none !important; }
/* Absolute rather than fixed, and as tall as the largest viewport: the world then fills the whole phone screen, behind the
   status bar, the notch and the browser's toolbars, instead of Safari banding the edges in a flat colour. */
#world { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; display: block; touch-action: none; }
.outlined { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 1px 3px #000; }
.framed { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 2px solid var(--edge); border-radius: 12px; box-shadow: 0 6px 18px #0009; }
.x { background: none; border: 0; color: var(--ink-dim); font-size: 26px; line-height: 1; width: 40px; height: 36px; flex: none; }
img.icon { image-rendering: auto; display: block; }

/* ---------------------------------------------------------------- Loading and title */
.screen { position: absolute; inset: 0; z-index: 50; }
#loading { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2a1d12, var(--night) 70%); }
.brand { text-align: center; }
.kicker { margin: 0; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember); }
.brand h1 { margin: 2px 0 6px; font: 400 clamp(44px, 12vw, 72px)/1 var(--title); color: var(--gold); text-shadow: 0 0 22px #ff7a2e66, 3px 3px 0 #3a1a08; }
.blurb { margin: 0 auto; max-width: 340px; font-size: 16px; color: var(--ink); }
.bar { width: 220px; height: 8px; margin: 18px auto 8px; border-radius: 4px; background: #0008; border: 1px solid var(--edge); overflow: hidden; }
#load-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--ember-deep), var(--ember)); transition: width 0.15s; }
#load-text { margin: 0; color: var(--ink-dim); font-size: 14px; }
#title { background: radial-gradient(ellipse at center, #14110d55, #14110df2 75%); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.title-scroll { max-width: 440px; margin: 0 auto; padding: calc(36px + var(--safe-t)) 16px calc(28px + var(--safe-b)); display: flex; flex-direction: column; gap: 16px; }
.card { background: #000a; border: 1px solid var(--edge); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.card h2 { margin: 0; font: 700 13px var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field span { font-size: 13px; color: var(--ink-dim); }
.field input, .inp { font: 500 17px var(--ui); color: var(--ink); background: #0007; border: 1px solid var(--edge-hi); border-radius: 8px; padding: 9px 10px; width: 100%; min-width: 0; }
.field input::placeholder, .inp::placeholder { color: #b8a68099; }
.seg { display: flex; background: #0006; border-radius: 8px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; color: var(--ink-dim); padding: 7px 6px; border-radius: 6px; font-size: 15px; }
.seg button[aria-selected="true"] { background: var(--gold); color: var(--night); font-weight: 700; }
.shirts { display: flex; justify-content: center; gap: 12px; }
.shirts button { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #0008; }
.shirts button[aria-checked="true"] { border-color: var(--gold); }
.fine { margin: 0; font-size: 13px; color: var(--ink-dim); }
.center { text-align: center; }
.foot { opacity: 0.8; }
.status { margin: 0; font-size: 14px; color: var(--ink-dim); min-height: 1em; }
.status.bad { color: var(--bad); }
.link { color: var(--cyan); font-size: 14px; }
.stone { border: 1.5px solid var(--edge-hi); background: linear-gradient(180deg, #4a3a28, #2e2418); color: var(--ink); border-radius: 8px; padding: 10px 12px; font-size: 16px; min-height: 42px; box-shadow: inset 0 1px 0 #ffffff1a; width: 100%; }
.stone.primary { background: linear-gradient(180deg, #b8461e, #7a2a1a); border-color: var(--ember); }
.stone.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.stone:disabled { opacity: 0.45; cursor: default; }
.stone.danger { color: #ff8a7a; }
.row { display: flex; gap: 8px; align-items: center; }
.row > .stone { flex: 1; }

/* ---------------------------------------------------------------- HUD */
/* Overlays are absolute, not fixed (the page never scrolls, so they sit in the same place): Safari on iPhone paints a flat
   band of colour behind the status bar and toolbar whenever a fixed layer touches the screen's edge, hiding the world there. */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; display: flex; flex-direction: column; }
#hud button, #hud input, #hud form, #hud .framed, #hud #dialog, #hud nav, #minimap-wrap { pointer-events: auto; }
#top { display: flex; justify-content: space-between; align-items: flex-start; padding: calc(6px + var(--safe-t)) 10px 0; gap: 8px; }
#top-left { display: flex; flex-direction: column; gap: 6px; }
.orbs { display: flex; gap: 6px; align-items: flex-start; }
.orb { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--edge-hi); background: #2a0e0b; position: relative; overflow: hidden; padding: 0; box-shadow: 0 2px 6px #000a; }
.orb .fill { position: absolute; left: 0; right: 0; bottom: 0; background: #b3120b; }
.orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, #ffffff33, transparent 45%, #0000004d); }
.orb span { position: relative; z-index: 1; font: 700 20px var(--ui); color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.orb.low { border-color: var(--bad); }
.mini-orbs { display: flex; flex-direction: column; gap: 6px; }
.mini-orb { display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; }
.mini-orb .dot { width: 26px; height: 26px; border-radius: 50%; background: #000b; border: 2px solid var(--edge-hi); position: relative; overflow: hidden; display: grid; place-items: center; }
.mini-orb.on .dot { border-color: var(--gold); }
.mini-orb .fill { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0.55; }
.mini-orb.on .fill { opacity: 1; }
.mini-orb img { position: relative; width: 15px; height: 15px; }
.mini-orb span { font-size: 13px; color: #fff; font-variant-numeric: tabular-nums; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.hud-row { display: flex; gap: 6px; align-items: center; }
.badge { background: #000a; border: 1px solid var(--edge); border-radius: 6px; padding: 1px 8px; text-align: center; line-height: 1.05; }
.badge small { display: block; font-size: 10px; letter-spacing: 0.08em; color: var(--ink-dim); }
.badge b { font-size: 17px; color: var(--gold); }
.square { width: 34px; height: 34px; border-radius: 6px; background: #000a; border: 1px solid var(--edge); display: grid; place-items: center; padding: 0; color: var(--ink); }
.square.on { color: var(--gold); border-color: var(--gold); }
.square img { width: 22px; height: 22px; }
#party { display: flex; flex-direction: column; gap: 3px; }
#party:empty { display: none; }
#party { background: #000a; border: 1px solid var(--edge); border-radius: 6px; padding: 5px; }
.pf { display: flex; gap: 5px; align-items: center; }
.pf img { width: 22px; height: 22px; border-radius: 50%; background: #0008; }
.pf small { display: block; font-size: 11px; color: var(--gold); }
.pf.down { opacity: 0.45; }
.pf .hb { width: 70px; height: 6px; background: #3a0e0b; border-radius: 2px; overflow: hidden; }
.pf .hb div { height: 100%; }
#top-mid { flex: 1; display: flex; justify-content: center; min-width: 0; }
#target { width: 170px; background: #000b; border: 1px solid var(--edge); border-radius: 6px; padding: 4px 8px 6px; text-align: center; }
#target b { display: block; font-size: 14px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpbar { position: relative; height: 13px; background: #b3120b; }
.hpbar div { position: absolute; left: 0; top: 0; bottom: 0; background: #18b81d; }
.hpbar span { position: relative; display: block; font-size: 11px; line-height: 13px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
#top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#minimap-wrap { position: relative; width: 116px; height: 116px; }
#minimap { width: 116px; height: 116px; border-radius: 50%; border: 3px solid var(--edge-hi); box-shadow: 0 2px 8px #000a; display: block; cursor: pointer; }
#north { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #000c; color: var(--gold); font: 700 12px/18px var(--ui); text-align: center; pointer-events: none; left: 49px; top: -2px; }
#sky-badge { font-size: 12px; background: #0009; border-radius: 999px; padding: 2px 9px; display: flex; gap: 5px; align-items: center; }
#wild-badge { background: #000b; border: 1.5px solid #a8321e; border-radius: 6px; padding: 3px 8px; text-align: right; display: flex; gap: 5px; align-items: center; }
#wild-badge small { display: block; font-size: 10px; letter-spacing: 0.08em; color: var(--ink-dim); }
#wild-badge b { color: var(--gold); font-size: 16px; }
#xp-drops { position: relative; width: 120px; height: 110px; }
.xp { position: absolute; right: 0; bottom: 0; display: flex; gap: 4px; align-items: center; font: 700 16px var(--ui); color: #fff; animation: rise 1.6s ease-out forwards; }
.xp img { width: 18px; height: 18px; }
.xp .ic { display: flex; gap: 2px; font-style: normal; }
@keyframes rise { to { transform: translateY(-90px); opacity: 0; } }
#banner { position: absolute; left: 50%; top: calc(78px + var(--safe-t)); transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: #000c; border: 2px solid var(--gold); border-radius: 10px; padding: 8px 16px 8px 10px; animation: pop 0.35s; }
#banner img { width: 36px; height: 36px; }
#banner b { display: block; font: 400 22px var(--title); color: var(--gold); }
#banner span { font-size: 14px; }
@keyframes pop { from { transform: translateX(-50%) scale(0.85); opacity: 0; } }
#zone-banner { position: absolute; left: 0; right: 0; top: calc(140px + var(--safe-t)); text-align: center; animation: fade 0.4s; }
#zone-banner small { display: block; font-size: 11px; letter-spacing: 0.15em; color: var(--ink-dim); text-shadow: 0 1px 3px #000; }
#zone-banner b { font: 400 26px var(--title); color: var(--gold); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
@keyframes fade { from { opacity: 0; } }

#bottom { margin-top: auto; display: flex; flex-direction: column; gap: 0; }
#chat-lines { padding: 0 10px 8px; max-width: 580px; }
#chat-lines p { margin: 0; font-size: 14px; line-height: 1.3; transition: opacity 1s; }
#chat-lines p.old { opacity: 0.45; }
#history { margin: 0 8px 8px; max-width: 580px; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; max-height: min(280px, 45dvh); }
.history-head { display: flex; align-items: center; }
.filters { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.filters button { border: 0; background: none; color: var(--ink-dim); padding: 4px 8px; border-radius: 6px; font-size: 14px; }
.filters button.on { background: var(--panel-2); color: var(--gold); }
.history-body { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 3px; -webkit-user-select: text; user-select: text; }
.history-body p { margin: 0; font-size: 15px; }
#chat-input { margin: 0 8px 8px; display: flex; gap: 8px; }
#chat-input input { flex: 1; font: 500 17px var(--ui); color: var(--ink); background: #000c; border: 1px solid var(--edge-hi); border-radius: 8px; padding: 9px 10px; min-width: 0; }
#chat-channel { width: 52px; border-radius: 8px; background: #000c; border: 1px solid var(--edge-hi); color: var(--ink); }
#chat-channel.clan { color: #8cf09a; }
#chat-input .x { background: #000c; border-radius: 8px; }
.k-normal { color: #fff; } .k-level { color: var(--gold); } .k-quest { color: var(--cyan); } .k-bad { color: var(--bad); }
.k-chat { color: #9ad8ff; } .k-pm { color: #d4a8ff; } .k-clan { color: #8cf09a; }

/* Dialogue: parchment */
#dialog { margin: 0 8px 8px; align-self: center; width: calc(100% - 16px); max-width: 600px; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, #efe0b8, #d9c592); border: 2px solid #6a4f2a; box-shadow: 0 6px 18px #000a; color: var(--parchment-ink); max-height: 55dvh; overflow-y: auto; }
#dialog .portrait { width: 64px; height: 64px; flex: none; border-radius: 6px; border: 1px solid #6a4f2a; background: #0000001f; }
#dialog h3 { margin: 0 0 4px; font: 400 20px var(--title); color: #7a1a0a; }
#dialog p { margin: 0 0 8px; font-size: 16px; }
#dialog .opts { display: flex; flex-direction: column; gap: 4px; }
#dialog .opts button { text-align: left; background: #ffffff59; border: 1px solid #6a4f2a80; border-radius: 6px; padding: 8px 10px; color: #1e3fa0; font-size: 16px; }
#dialog .opts button:hover { background: #ffffff8c; }

/* Panels */
#panel { margin: 0 8px 8px; align-self: flex-end; width: calc(100% - 16px); max-width: 390px; display: flex; flex-direction: column; max-height: min(470px, calc(100dvh - 250px)); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 0 14px; border-bottom: 1px solid var(--edge); }
.panel-head h2 { margin: 0; font: 400 21px var(--title); color: var(--gold); }
.panel-body { padding: 12px; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#tabs { display: flex; gap: 3px; padding: 5px 6px calc(3px + var(--safe-b)); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-top: 2px solid var(--edge); justify-content: center; }
#tabs button { flex: 1; max-width: 84px; min-height: 52px; border-radius: 7px; background: #0003; border: 1px solid #0006; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 3px 0; color: var(--ink-dim); }
#tabs button.on { background: var(--ember-deep); border-color: var(--ember); color: var(--ink); }
#tabs img { width: 26px; height: 26px; }
#tabs small { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Panel contents */
.grid { display: grid; gap: 6px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 68px)); justify-content: center; } .g3 { grid-template-columns: repeat(3, 1fr); } .g5 { grid-template-columns: repeat(5, 1fr); } .g7 { grid-template-columns: repeat(7, 1fr); gap: 5px; }
.gauto { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
.slot { aspect-ratio: 1; border-radius: 6px; background: #00000038; border: 1px solid #00000059; position: relative; display: grid; place-items: center; padding: 0; min-width: 0; }
.slot img { width: 78%; height: 78%; }
.slot .q { position: absolute; left: 4px; top: 1px; font: 700 13px var(--ui); color: #ffff00; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.slot .q.w { color: #fff; } .slot .q.g { color: #00ff80; }
.slot .price { position: absolute; right: 3px; bottom: 1px; font-size: 12px; color: var(--gold); text-shadow: 0 0 2px #000, 0 0 2px #000; }
.slot.picking { border-color: var(--gold); }
.note { font-size: 13px; color: var(--ink-dim); margin: 8px 0 0; }
.stat { display: flex; justify-content: space-between; font-size: 14px; padding: 1px 0; }
.stat span:first-child { color: var(--ink-dim); }
.stat span:last-child { font-variant-numeric: tabular-nums; }
.skill { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 6px; background: #00000038; border: 1px solid #0006; text-align: left; }
.skill.on { border-color: var(--gold); }
.skill img { width: 26px; height: 26px; }
.skill b { color: var(--gold); font-size: 17px; font-weight: 500; }
.skill small { color: var(--ink-dim); font-size: 13px; }
.detail { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.detail h3 { margin: 0; font: 400 19px var(--title); }
.detail h3 small { font: 500 14px var(--ui); color: var(--ink-dim); margin-left: 4px; }
.progress { height: 10px; border-radius: 3px; background: #0006; overflow: hidden; }
.progress div { height: 100%; background: linear-gradient(90deg, #2a9a2a, var(--good)); }
.chips { display: flex; gap: 4px; margin: 8px 0; }
.chips button { flex: 1; border: 0; border-radius: 6px; padding: 6px; background: #0004; color: var(--ink); font-size: 14px; }
.chips button.on { background: var(--gold); color: var(--night); }
.zone-head { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 6px 0 4px; text-align: left; }
.zone-head b { font: 400 18px var(--title); color: var(--gold); flex: 1; }
.zone-head small { color: var(--ink-dim); }
.zone-head small.all { color: var(--good); }
.quest { margin: 0 0 4px; }
.quest > button { width: 100%; display: flex; gap: 6px; align-items: center; text-align: left; border: 0; border-radius: 6px; padding: 8px 10px; background: #00000038; font-size: 16px; }
.quest > button span { flex: 1; }
.quest .journal { padding: 4px 10px 6px; font-size: 14px; }
.quest .journal p { margin: 2px 0; }
.q-done { color: var(--good); } .q-active { color: #ffff40; } .q-available { color: #ff5a4a; } .q-locked { color: #8a6a5a; }
.equip { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; justify-content: center; margin-bottom: 10px; }
.eslot { width: 64px; height: 64px; border-radius: 8px; background: #00000047; border: 1px solid #00000080; position: relative; display: grid; place-items: center; padding: 0; font-size: 11px; color: #ffffff59; text-transform: uppercase; }
.eslot.full { border-color: var(--edge-hi); }
.eslot img { width: 48px; height: 48px; }
.eslot .q { position: absolute; left: 4px; top: 2px; font: 700 13px var(--ui); color: #ff0; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.styles { display: flex; gap: 6px; }
.styles .stone { padding: 6px 4px; line-height: 1.1; }
.styles small { display: block; font-size: 12px; color: var(--ink-dim); }
.box { padding: 8px; border-radius: 6px; background: #00000038; display: flex; gap: 8px; align-items: center; font-size: 14px; }
.box img { width: 26px; height: 26px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.tile { border-radius: 7px; background: #00000038; border: 1px solid #0006; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px 0; }
.tile img { width: 32px; height: 32px; }
.tile.on { background: #2a5a7a; border: 2px solid #56b0e8; }
.tile.auto { background: var(--ember-deep); border: 2px solid var(--ember); }
.tile.locked { opacity: 0.3; }
.tile small { font-size: 12px; color: var(--ink-dim); }
.tile small.bad { color: var(--bad); }
.runes { display: flex; gap: 8px; flex-wrap: wrap; }
.runes div { text-align: center; font-size: 12px; color: #ff0; }
.runes img { width: 20px; height: 20px; margin: 0 auto; }
.friend { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.friend .dot { width: 9px; height: 9px; border-radius: 50%; background: #6a5a48; flex: none; }
.friend .dot.on { background: var(--good); }
.friend span { flex: 1; font-size: 16px; }
.friend span.off { color: var(--ink-dim); }
.friend .rank { flex: none; font-size: 12px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--cyan); color: var(--cyan); }
.friend .rank.leader { border-color: var(--gold); color: var(--gold); }
.linkbtn { background: none; border: 0; color: var(--cyan); font-size: 15px; padding: 4px; }
.more { background: none; border: 0; color: var(--ink-dim); font-size: 20px; width: 32px; height: 30px; }
.label { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-dim); text-transform: uppercase; margin: 6px 0 0; }
.pms p { margin: 2px 0; color: #d4a8ff; font-size: 15px; }
.clan-name { font: 400 21px var(--title); color: #8cf09a; margin: 0; }
input[type=range] { width: 100%; accent-color: var(--ember); }

/* The long-press menu and item menus */
#menu { position: absolute; inset: 0; z-index: 30; }
.menu-box { position: absolute; width: 240px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1.5px solid var(--edge-hi); border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px #000a; max-height: calc(100dvh - 16px); overflow-y: auto; }
.menu-box button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; min-height: 40px; font-size: 16px; border-bottom: 1px solid #5f4a3080; }
.menu-box button:hover, .menu-box button:focus-visible { background: #ffffff12; }
.menu-box button.cancel { color: var(--ink-dim); background: #0004; text-align: center; border: 0; }
.menu-box .t-npc { color: var(--gold); font-weight: 700; } .menu-box .t-obj { color: #a8d8a0; font-weight: 700; } .menu-box .t-item { color: #f0b060; font-weight: 700; }
.menu-box .lv-higher { color: var(--bad); } .menu-box .lv-lower { color: var(--good); } .menu-box .lv-same { color: var(--ink-dim); }
.menu-box h4 { margin: 0; padding: 8px 12px 4px; font-size: 13px; color: var(--ink-dim); font-weight: 500; }

/* Sheets: bank, shops, crafting, trade, the Exchange */
#sheet { position: absolute; inset: 0; z-index: 25; background: #0008; display: flex; align-items: flex-end; justify-content: center; }
.sheet-box { width: 100%; max-width: 560px; max-height: min(88dvh, 820px); display: flex; flex-direction: column; border-radius: 14px 14px 0 0; border-bottom: 0; }
@media (min-width: 700px) { #sheet { align-items: center; } .sheet-box { border-radius: 14px; border-bottom: 2px solid var(--edge); } }
.sheet-head { display: flex; align-items: center; padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--edge); border-radius: 12px 12px 0 0; }
.sheet-head h2 { flex: 1; margin: 0; font: 400 21px var(--title); color: var(--ink); text-align: center; padding-left: 60px; }
.done { border: 0; background: none; color: var(--gold); font-size: 17px; font-weight: 700; width: 60px; text-align: right; padding: 6px 0; }
.sheet-body { padding: 14px 14px calc(14px + var(--safe-b)); overflow-y: auto; min-height: 0; flex: 1 1 auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
.sec { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.sec b { font: 400 18px var(--title); color: var(--gold); }
.sec small { font-size: 12px; color: var(--ink-dim); }
.coins { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--gold); }
.coins img { width: 24px; height: 24px; }
.recipe { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; background: #00000038; }
.recipe.blocked { opacity: 0.6; }
.recipe img { width: 34px; height: 34px; flex: none; }
.recipe .t { flex: 1; min-width: 0; }
.recipe .t b { display: block; font-weight: 500; font-size: 16px; }
.recipe .t small { display: block; font-size: 13px; color: var(--ink-dim); }
.recipe .why { font-size: 13px; color: #ff8a7a; text-align: right; max-width: 40%; }
.qty { min-width: 42px; min-height: 38px; border-radius: 5px; background: var(--ember-deep); border: 1px solid var(--ember); font-size: 15px; }
.offer { padding: 10px; border-radius: 10px; background: #00000038; display: flex; flex-direction: column; gap: 6px; }
.offer .top { display: flex; gap: 8px; align-items: center; }
.offer img { width: 34px; height: 34px; }
.offer small { display: block; font-size: 13px; color: var(--ink-dim); }
.offer small.good { color: var(--good); } .offer small.bad { color: var(--bad); }
.offer .bar2 { height: 6px; border-radius: 3px; background: #0006; overflow: hidden; }
.offer .bar2 div { height: 100%; background: var(--ember); }
.pick { display: flex; align-items: center; gap: 8px; border: 0; background: none; width: 100%; text-align: left; padding: 4px 0; font-size: 16px; }
.pick img { width: 30px; height: 30px; }
.pick span { flex: 1; }
.pick b { color: var(--gold); font-weight: 500; font-size: 14px; }
.numrow { display: flex; gap: 6px; align-items: center; }
.numrow label { width: 84px; font-size: 14px; color: var(--ink-dim); flex: none; }
.numrow input { flex: 1; }
.numrow button { background: none; border: 0; color: var(--cyan); font-size: 15px; min-width: 32px; }

/* Modals */
.modal { position: absolute; inset: 0; z-index: 40; background: #0008; display: grid; place-items: center; padding: 24px; }
.modal .framed { max-width: 380px; width: 100%; padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.modal h2 { margin: 0; font: 400 30px var(--title); color: var(--gold); }
.modal p { margin: 0; }
#death { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(circle, #000a, #000e); pointer-events: none; }
#death b { font: 400 34px var(--title); color: var(--bad); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

/* Labels over people in the world */
#labels { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; z-index: 5; overflow: hidden; }
.lab { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; will-change: transform; }
.lab .say { max-width: 220px; white-space: normal; text-align: center; font: 700 14px var(--ui); color: #ffff40; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.lab .nm { font: 700 13px var(--ui); color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.lab .nm i { font-style: normal; color: var(--ink-dim); font-weight: 500; }
.lab .mk { font: 700 24px var(--ui); color: #ffd23a; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; line-height: 1; }
.lab .hb { width: 34px; height: 5px; background: #b3120b; border: 1px solid #000; }
.lab .hb div { height: 100%; background: #18b81d; }
.lab img { width: 18px; height: 18px; }
.splat-at { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; }
.splat { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--ui); color: #fff; background: #b3120b; border: 2px solid #5a0806; text-shadow: 0 1px 1px #000; animation: splat 1s ease-out forwards; }
.splat.miss { background: #2a5aa8; border-color: #10306a; }
.splat.special { background: #7a3ad8; border-color: #3a1a6a; }
@keyframes splat { 0% { transform: translateY(0) scale(0.6); } 15% { transform: translateY(-6px) scale(1.1); } 80% { opacity: 1; } 100% { transform: translateY(-26px) scale(1); opacity: 0; } }

@media (max-width: 420px) {
  #minimap-wrap, #minimap { width: 96px; height: 96px; }
  #north { left: 39px; }
  #target { width: 130px; }
}
@media (prefers-reduced-motion: reduce) { .xp, #banner, #zone-banner, .splat { animation-duration: 0.01s; } }

#perf { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(76px + var(--safe-b)); z-index: 60; pointer-events: none; white-space: pre; font: 600 12px/1.35 ui-monospace, Menlo, monospace; color: #9f9; background: #000b; padding: 4px 8px; border-radius: 6px; text-align: center; }

/* ---------------------------------------------------------------- World map */
#btn-map { position: absolute; left: -8px; bottom: -6px; width: 32px; height: 32px; border-radius: 50%; background: #000c; border: 2px solid var(--edge-hi); pointer-events: auto; }
#worldmap { position: absolute; inset: 0; z-index: 24; background: #000a; display: grid; place-items: center; padding: calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b)); }
.wm-box { width: min(1100px, 100%); height: min(800px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.wm-head { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--edge); }
.wm-head h2 { margin: 0; font: 400 22px var(--title); color: var(--gold); }
.wm-where { color: var(--ink-dim); font-size: 14px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-tools { display: flex; gap: 6px; }
.wm-tools .square { font-size: 20px; line-height: 1; }
.wm-btn { height: 34px; padding: 0 12px; border-radius: 6px; background: #000a; border: 1px solid var(--edge); font-size: 14px; }
.wm-body { position: relative; flex: 1; min-height: 0; }
#wm-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; background: #1a150f; }
#wm-tip { position: absolute; max-width: 260px; background: #14110df0; border: 1px solid var(--edge-hi); border-radius: 8px; padding: 6px 10px; font-size: 14px; pointer-events: none; display: flex; flex-direction: column; gap: 2px; }
#wm-tip b { color: var(--gold); font-weight: 600; }
#wm-tip i { color: var(--ink-dim); font-style: normal; }
.wm-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 6px 14px; border-top: 1px solid var(--edge); font-size: 13px; color: var(--ink-dim); }
.wm-legend span { display: flex; align-items: center; gap: 6px; }
.wm-legend .hint { margin-left: auto; }
.wm-legend .q { width: 18px; height: 18px; border-radius: 50%; background: #000; border: 2px solid; display: grid; place-items: center; font: 700 12px var(--ui); font-style: normal; }
.wm-legend .q.new { color: #ffd23a; } .wm-legend .q.active { color: #56dce8; } .wm-legend .q.done { color: #8a8070; }
@media (max-width: 640px) {
  #worldmap { padding: calc(4px + var(--safe-t)) 4px calc(4px + var(--safe-b)); }
  .wm-box { height: 100%; }
  .wm-where, .wm-legend .hint, .wm-btn[data-wm="all"] { display: none; }
  .wm-head h2 { font-size: 19px; }
}

/* Prayer and magic tabs */
h3.sub { margin: 10px 0 6px; font: 400 16px var(--title); color: var(--gold); display: flex; align-items: baseline; gap: 8px; }
h3.sub small { font: 500 12px var(--ui); color: var(--ink-dim); }
.tile small.cd { color: #9ad0ff; font-weight: 700; }
.tile.cooling img { opacity: 0.4; filter: grayscale(0.7); }
.tile small.mana { color: #c8a8ff; }

/* ---------------------------------------------------------------- Character creation */
#creator { position: absolute; inset: 0; z-index: 30; background: radial-gradient(circle at 50% 40%, #2a1d12e8, #0c0a08f4 75%); display: grid; place-items: center; padding: calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b)); overflow-y: auto; }
.cr-box { width: min(860px, 100%); display: grid; grid-template-columns: minmax(220px, 1fr) 1.3fr; gap: 8px; padding: 14px; }
.cr-preview { display: flex; flex-direction: column; min-height: 320px; }
#cr-canvas { flex: 1; width: 100%; min-height: 300px; display: block; touch-action: none; cursor: grab; border-radius: 10px; background: radial-gradient(circle at 50% 60%, #4a3a26, #1a140e 70%); }
.cr-options h2 { margin: 0; font: 400 28px var(--title); color: var(--gold); }
.cr-options > .fine { margin: 4px 0 10px; }
.cr-row { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px; margin: 10px 0; }
.cr-row > span, .cr-row > label { color: var(--ink-dim); font-size: 14px; }
#cr-heroname { font-size: 18px; }
#cr-status { margin: 8px 0 0; }
#cr-logout { display: block; margin: 4px auto 0; }
#cr-logout[hidden] { display: none; }
.cr-row .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cr-row .chips button { padding: 6px 12px; border-radius: 999px; background: #0006; border: 1px solid var(--edge); font-size: 14px; }
.cr-row .chips button.on { border-color: var(--gold); color: var(--gold); background: #3a2a14; }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #0008; padding: 0; box-shadow: inset 0 -3px 5px #0005; }
.swatches button.on { border-color: var(--gold); box-shadow: 0 0 0 2px #000, 0 0 8px var(--gold); }
.cr-actions { display: flex; gap: 8px; margin: 14px 0 6px; }
.cr-actions .stone { flex: 1; }
@media (max-width: 640px) {
  .cr-box { grid-template-columns: 1fr; padding: 10px; }
  .cr-preview { min-height: 220px; }
  #cr-canvas { min-height: 210px; }
  .cr-row { grid-template-columns: 64px 1fr; margin: 7px 0; }
}

/* Reporting a bug */
#bug { z-index: 70; }   /* above the title screen, so trouble logging in can be reported */
.bug-box { width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.bug-box h2 { margin: 0; font-size: 24px; }
.bug-box .note { margin: 0; }
.bug-box select, .bug-box textarea { font: 500 16px var(--ui); color: var(--ink); background: #0007; border: 1px solid var(--edge-hi); border-radius: 8px; padding: 9px 10px; width: 100%; }
.bug-box textarea { resize: vertical; min-height: 110px; -webkit-user-select: text; user-select: text; }
.bug-shot-row { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.bug-shot-row input { width: 20px; height: 20px; accent-color: var(--gold); }
#bug-preview { width: 100%; max-height: 180px; object-fit: contain; border-radius: 6px; border: 1px solid var(--edge); background: #000; }
.bug-box { text-align: left; align-items: stretch; }
.bug-box .row { gap: 8px; }
.bug-box .row button { flex: 1; }

/* The account's email, in Options */
.acct { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--edge); border-radius: 10px; background: #0003; }
.acct p { margin: 0; }
.acct .tag { font-size: 12px; border-radius: 6px; padding: 1px 6px; background: var(--bad); color: #fff; margin-left: 4px; }
.acct .tag.ok { background: #3c7a3a; }
.acct form { display: flex; flex-direction: column; gap: 6px; }