:root {
    /* One look for everyone: the dark wood panels (the developer's choice; never switched by the device's light/dark mode) */
    --panel: #2c2416; --ink: #ecdcb5; --edge: #8a6a36; --bar: #5b8a32; --slot: #3d3320; --log: #9c6a32;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); }
  html, body { height: 100%; margin: 0; overflow: hidden; background: #9dc46a; }
  body { font-family: "Palatino Linotype", Palatino, Georgia, serif; color: var(--ink); }
  canvas { display: block; touch-action: none; }
  /* dying (ZFG-92): a gentle dim over the world (not the HUD, which comes after it in the page), faded in as you fall */
  #deathdim { position: fixed; inset: 0; pointer-events: none; background: #120c08; opacity: 0; transition: opacity 0.6s ease-out; }
  #deathdim.on { opacity: 0.42; transition: opacity 1.8s ease-in; }
  .bar { display: block; height: 8px; background: var(--slot); margin: 6px 0 3px; border: 1px solid var(--edge); }
  .bar i { display: block; height: 100%; width: 0; background: var(--bar); }
  #inv { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
  #skills { margin-top: 4px; }
  /* Four columns (Combat, Gathering, Processing, Life), each a heading with its skills listed down it.
     (minmax: a column never pushes the row wider than the panel.) */
  .skgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3px; align-items: start; }
  .skcol { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .skhead { margin: 0 0 1px; padding: 2px 0 3px; font-size: 10px; font-weight: bold; text-align: center; letter-spacing: 0.01em;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; border-bottom: 1px solid var(--edge); }
  .skmore { padding: 6px 1px; font-size: 10px; font-style: italic; text-align: center; line-height: 1.2; opacity: 0.6;
            border: 1px dashed var(--edge); border-radius: 3px; }
  #cblabel {
    position: fixed; transform: translate(-50%, -100%) scale(var(--ui, 1)); transform-origin: bottom center; pointer-events: none;
    padding: 1px 6px; border-radius: 3px; background: rgba(30, 20, 8, 0.72); color: #ffe27a;
    font: bold 12px "Palatino Linotype", Palatino, Georgia, serif; white-space: nowrap; text-shadow: 0 1px 1px #000;
  }
  /* A skill: its icon and level side by side (the number never sits on the icon), the XP bar underneath */
  .skill { position: relative; margin: 0; padding: 4px 2px 3px; min-width: 0; display: grid; grid-template-columns: auto auto; justify-content: center;
           align-items: center; column-gap: 2px; row-gap: 3px; font-size: 15px; line-height: 1; }
  /* Every skill icon is the same size (the developer's rule): a drawn icon (never an emoji) filling one fixed box */
  .skill .skic { width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .skill .skic .ico { width: 100%; height: 100%; }
  .skill b { font-size: 11px; font-weight: bold; text-align: left; }
  .skill .bar { grid-column: 1 / -1; width: 100%; height: 4px; margin: 0; box-sizing: border-box; }
  /* The size row cancels out the panel's scaling, so its buttons stay a comfortable tap size. */
  #uirow {
    display: flex; gap: 6px; height: 36px; margin-top: 8px;
    width: calc(100% * var(--ui, 1)); transform: scale(calc(1 / var(--ui, 1))); transform-origin: top left;
    margin-bottom: calc(36px * (1 - var(--ui, 1)) / var(--ui, 1));
  }
  #uirow button { flex: 1; min-width: 0; margin: 0; padding: 0; font-size: 16px; }
  #soundrow { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
  #volume { flex: 1 1 auto; width: auto; min-width: 60px; margin: 0; accent-color: var(--bar); }
  #mute { flex: 0 0 auto; width: auto; margin: 0; padding: 6px 10px; font-size: 12px; min-width: 64px; }
  #mute.on { background: var(--bar); color: #fff; border-color: #2f4d18; }
  #volnum { font-weight: normal; opacity: 0.8; font-size: 12px; }
  #skillcap { margin-top: 8px; min-height: 2.6em; font-size: 13px; }
  #guidebtn { margin-top: 6px; font-size: 13px; }
  #cbhead, #totallvl { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 13px; font-weight: bold; }
  #cbhead { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--edge); }
  #totallvl { margin-top: 3px; }
  #totallvl span { font-weight: normal; opacity: 0.8; }
  /* ---- The menu framework (src/ui/menu-kit.js): every window, its title bar, tabs, rows, item grids and choices ---- */
  /* A window: under the minimap's row (.mk-top) or in the middle (.mk-center). Its width (--mk-w) and its tallest on
     screen (--mk-h) are capped to the screen at any interface size (--ui): they're divided by the scale it's drawn at. */
  .mk-win {
    position: fixed; left: 50%; z-index: 6; display: flex; flex-direction: column; box-sizing: border-box;
    width: min(var(--mk-w, 360px), calc((100vw - 20px) / var(--ui, 1)));
    max-height: calc(var(--mk-h, 70vh) / var(--ui, 1));
    background: var(--panel); border: 3px solid var(--edge); border-radius: 5px; box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  }
  .mk-win[hidden] { display: none; }
  .mk-win:focus { outline: none; }
  .mk-win.mk-top { top: calc(58px + env(safe-area-inset-top, 0px)); transform: translateX(-50%) scale(var(--ui, 1)); transform-origin: top center; }
  .mk-win.mk-center { top: 50%; transform: translate(-50%, -50%) scale(var(--ui, 1)); }
  /* on a short screen (a phone on its side) a window may use more of the height */
  @media (max-height: 520px) { .mk-win { max-height: calc((100vh - 70px) / var(--ui, 1)); } }
  .uihead { display: flex; flex: none; align-items: center; gap: 8px; padding: 10px 10px 8px; border-bottom: 2px solid var(--edge); }
  .uihead h2 { margin: 0; font-size: 17px; flex: 1; min-width: 0; }
  .uihead > span { font-size: 12px; opacity: 0.8; white-space: nowrap; }
  .uihead .help { flex: none; }
  .mk-close, #wmclose { width: auto; flex: none; margin: 0; padding: 2px 9px; font-size: 16px; }
  #bankui .uihead h2, #storeui .uihead h2 { white-space: nowrap; }
  #interactmenu .uihead h2 { font-size: 15px; }
  /* Tabs: along the top (the Tutorial Chest), or down the left beside the body (the anvil's metals, each in its colour) */
  .mk-tabs[hidden] { display: none; }
  .mk-tabs button .ico { width: 18px; height: 18px; flex: none; }
  /* tabs along the top: one row that scrolls across when they don't fit (any --ui, a narrow window), its hidden edge faded,
     with a small arrow button at each side that has more (fitTabs in menu-kit.js sets .more-l / .more-r) */
  .mk-tabrow { position: relative; display: flex; align-items: flex-end; flex: none; }
  .mk-tabs.mk-top { display: flex; flex: 1 1 auto; min-width: 0; gap: 4px; padding: 8px 10px 0; overflow-x: auto; overflow-y: hidden;
                    scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth; }
  .mk-tabs.mk-top::-webkit-scrollbar { display: none; }
  .mk-tabrow.more-r .mk-tabs.mk-top { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent calc(100% - 14px)); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent calc(100% - 14px)); }
  .mk-tabrow.more-l .mk-tabs.mk-top { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent calc(100% - 14px)); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent calc(100% - 14px)); }
  .mk-tabrow.more-l.more-r .mk-tabs.mk-top { -webkit-mask-image: linear-gradient(to right, transparent 14px, #000 44px, #000 calc(100% - 44px), transparent calc(100% - 14px)); mask-image: linear-gradient(to right, transparent 14px, #000 44px, #000 calc(100% - 44px), transparent calc(100% - 14px)); }
  .mk-tabarrow { display: none; position: absolute; bottom: 4px; z-index: 1; width: 22px; height: 26px; margin: 0; padding: 0; font-size: 18px; line-height: 22px; }
  .mk-tabarrow.prev { left: 2px; } .mk-tabarrow.next { right: 2px; }
  .mk-tabrow.more-l .mk-tabarrow.prev, .mk-tabrow.more-r .mk-tabarrow.next { display: block; }
  .mk-tabs.mk-top button { position: relative; margin: 0; padding: 6px 7px; flex: none; width: auto; white-space: nowrap; font-size: 12.5px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    display: flex; align-items: center; justify-content: center; gap: 3px; }
  .mk-tabs.mk-top button[aria-selected="true"] { background: var(--bar); color: #fff; border-color: #2f4d18; }
  .mk-tabs button .dot { position: absolute; top: 3px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #e0a020; }
  .mk-side { display: flex; min-height: 0; flex: 1; }
  .mk-tabs.mk-left { display: flex; flex-direction: column; gap: 3px; padding: 8px 0 8px 8px; flex: none; overflow-y: auto; overflow-x: hidden; }
  .mk-tabs.mk-left button { margin: 0; width: 108px; white-space: nowrap; display: flex; align-items: center; gap: 5px; padding: 4px 6px; font-size: 12px; text-align: left;
    border-left: 5px solid var(--tab, var(--edge)); border-radius: 3px 0 0 3px; }
  .mk-tabs.mk-left button[aria-selected="true"] { background: rgba(224, 160, 32, 0.35); font-weight: bold; }
  /* Rows: an icon, a name and a line under it; never squashed to fit (flex: none), the list scrolls instead.
     Locked: dimmed, with red "Requires N Skill" text (under the name, or over the row in a .req-over list), never a padlock.
     Missing something: disabled, saying what in plain words (.why). */
  .mk-list { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; overflow-y: auto; flex: 1; min-width: 0; }
  .mk-row { position: relative; flex: none; display: flex; align-items: center; gap: 8px; text-align: left; }
  button.mk-row { margin: 0; padding: 6px 8px; min-height: 40px; }
  .mk-row > .mk-badge { flex: none; width: 34px; text-align: center; font-size: 12px; padding: 2px 0; border-radius: 3px; background: var(--edge); color: #fff; }
  .mk-row > .mk-ico { flex: none; width: 26px; font-style: normal; font-size: 20px; text-align: center; }
  .mk-row > .mk-ico .ico { width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
  .mk-row > .mk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  button.mk-row > .mk-txt { font-weight: bold; }
  .mk-row small { font-weight: normal; font-size: 11.5px; opacity: 0.8; }
  .mk-row small.why { opacity: 1; font-style: italic; }
  .mk-row > .mk-mark { flex: none; width: 18px; font-style: normal; text-align: right; }
  .mk-row .req { display: block; color: #ff4a36; font-weight: bold; font-size: 11.5px; opacity: 1; }
  button.mk-row:hover:not(:disabled) { background: rgba(224, 160, 32, 0.28); }
  button.mk-row:disabled { opacity: 0.55; cursor: default; }
  button.mk-row.locked:disabled { opacity: 1; }
  .mk-row.locked > .mk-badge, .mk-row.locked > .mk-ico, .mk-row.locked .t, .mk-row.locked .mk-line, .mk-row.locked > .mk-mark { opacity: 0.5; }
  .req-over .mk-row.locked > .mk-ico, .req-over .mk-row.locked .t, .req-over .mk-row.locked .mk-line { opacity: 0.22; filter: grayscale(1); }
  .req-over .mk-row .req { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 26px 0 30px;
    background: rgba(24, 16, 10, 0.5); border-radius: 3px; font-size: 12px; white-space: nowrap; text-align: center; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
  @media (pointer: coarse) { button.mk-row { min-height: 46px; } .mk-choice button { padding: 9px 2px; font-size: 14px; } }
  /* Item grids: slots with icons and counts (top left: gold, white for thousands, green for millions), greyed
     placeholders (.none), locked ones (their level in red, bottom right), and dragging (.lifted, .over) */
  .mk-grid { display: grid; grid-template-columns: repeat(var(--cols, 8), 1fr); gap: 3px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .mk-grid > i { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 18px;
                 background: var(--slot); border: 1px solid var(--edge); cursor: pointer; }
  .mk-grid > i > b { position: absolute; top: 0; left: 2px; font-size: 9.5px; color: #b8860b; text-shadow: 0 0 2px #000; }
  .mk-grid > i > b.k { color: #fff; } .mk-grid > i > b.m { color: #3cc26a; }
  .mk-grid > i.none, .mk-grid > i.locked { cursor: default; }
  .mk-grid > i.none > span { opacity: 0.3; filter: grayscale(1); }
  .mk-grid > i.none > b { color: #ddd; opacity: 0.7; }
  .mk-grid > i.locked > span { opacity: 0.35; filter: grayscale(0.7); }
  .mk-grid > i > b.req { top: auto; left: auto; right: 1px; bottom: 0; color: #ff4a36; font-weight: bold; font-size: 10px; text-shadow: 0 0 2px #000, 0 0 2px #000; }
  .mk-grid > i.over { outline: 2px dashed #e0a020; outline-offset: -2px; }
  .mk-grid .empty { grid-column: 1 / -1; font-size: 12.5px; opacity: 0.8; padding: 10px 2px; font-style: italic; }
  .mk-sections h3, #storebody h3, #chestbody h3 { margin: 8px 0 4px; padding-bottom: 2px; border-bottom: 1px solid var(--edge); font-size: 11.5px; font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }   /* a section's heading, like the skills panel's */
  /* The bank, the metal store and the Tutorial Chest */
  #bankgrid { padding: 8px 10px; overflow-y: auto; border-top: 2px solid var(--edge); }
  #bankgrid > i.lifted { opacity: 0.3; }
  #bankbar, #storebar { flex: none; padding: 6px 10px 10px; border-top: 1px solid var(--edge); font-size: 12.5px; }
  #storebody, #chestbody { padding: 2px 10px 10px; overflow-y: auto; border-top: 2px solid var(--edge); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  #chestbody { touch-action: none; }
  #storebody .mk-grid { --cols: 7; }
  /* Choices (the amount picker, a setting's): a row of buttons, one lit */
  .mk-choice { align-items: center; }
  .mk-choice > span { margin-right: 2px; white-space: nowrap; }
  .mk-choice input { width: 56px; margin-left: 4px; font: inherit; padding: 3px 4px; border: 1px solid var(--edge); border-radius: 3px; background: var(--slot); color: var(--ink); }
  .mk-choice input[hidden] { display: none; }
  #makeqty { flex: none; padding: 6px 10px 10px; margin: 0; border-top: 1px solid var(--edge); font-size: 12.5px; }
  #makeqty button { flex: 1; min-width: 0; }
  .bankbtns { display: flex; gap: 4px; margin-top: 6px; }
  .bankbtns button { margin: 0; font-size: 12px; padding: 6px 2px; }
  #makestore { flex: none; margin: 0 10px 8px; width: auto; font-size: 12.5px; padding: 6px 4px; }
  #makestore[hidden] { display: none; }
  /* The skill guides: notes behind the ? button, then a row per level (the level in its badge, a tick once you have it) */
  #guidebody { overflow-y: auto; padding: 6px 10px 10px; }
  #guidenotes[hidden] { display: none; }
  .gnote { font-size: 12.5px; line-height: 1.4; margin: 4px 0 8px; padding: 6px 8px; border-radius: 3px; background: var(--slot); }
  .grow { gap: 6px; padding: 5px 0; border-bottom: 1px solid rgba(122, 92, 46, 0.35); font-size: 13.5px; }
  .grow:last-child { border-bottom: 0; }
  .grow > .mk-ico { font-size: 18px; }
  .grow > .mk-ico .ico { width: 1.25em; height: 1.25em; }
  #gmenu .req { display: inline; color: #ff4a36; font-weight: bold; font-size: 11.5px; }
  #invpanel, #skillpanel, #eqpanel, #setpanel, #questpanel, #spellpanel {
    position: fixed; right: 10px; bottom: calc(20px + 50px * var(--ui, 1) + env(safe-area-inset-bottom, 0px)); width: 210px;
    transform: scale(var(--ui, 1)); transform-origin: bottom right;
    background: var(--panel); border: 3px solid var(--edge); border-radius: 4px; padding: 10px;
  }
  #invpanel[hidden], #skillpanel[hidden], #eqpanel[hidden], #setpanel[hidden], #questpanel[hidden], #spellpanel[hidden] { display: none; }
  #skillpanel { width: 216px; }   /* a little wider than the others, for the four skill columns */
  #questpanel { width: 240px; }   /* the quest journal: wide enough for a step on two lines */
  .setrow { margin-top: 10px; font-size: 13px; }
  .setrow b { display: block; font-size: 13.5px; margin-bottom: 2px; }
  .setrow small { display: block; opacity: 0.8; font-size: 11.5px; margin-top: 3px; line-height: 1.35; }
  .setrow b { display: flex; align-items: center; justify-content: space-between; }
  .help { width: 20px; height: 20px; margin: 0; padding: 0; border-radius: 50%; font-size: 12px; font-weight: bold; line-height: 1; }
  .help[aria-expanded="true"] { background: var(--bar); color: #fff; }
  .setrow small[hidden] { display: none; }
  .seg { display: flex; gap: 4px; margin-top: 4px; }
  .seg button { margin: 0; padding: 6px 2px; font-size: 12px; }
  .seg button.on { background: var(--bar); color: #fff; border-color: #2f4d18; }
  .mk-panel > .uihead { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 0; border: 0; font-size: 15px; }   /* a side panel's title bar (the menu framework's) */
  #invhead + #inv { margin-top: 8px; }
  #invtools button .ico { width: 14px; height: 14px; display: inline-block; vertical-align: -0.2em; }
  #guidebtn .ico { width: 16px; height: 16px; display: inline-block; vertical-align: -0.25em; }
  /* The coin pouch, under the bag, and the bank's under its slots: Gold and Silver Coins side by side (never slots) */
  .pouch { display: flex; justify-content: space-around; gap: 6px; margin-top: 6px; padding: 4px 6px; background: var(--slot);
           border: 1px solid var(--edge); border-radius: 3px; font-size: 12.5px; user-select: none; -webkit-user-select: none; }
  .pouch .coin { display: flex; align-items: center; gap: 4px; white-space: nowrap; min-width: 0; }
  .pouch .coin i { display: flex; width: 16px; height: 16px; }
  .pouch .coin i svg { width: 16px; height: 16px; }
  .pouch b { font-variant-numeric: tabular-nums; }
  #pouchgc b, #bankgc b { color: #f0c850; }
  /* The bank's coins: a small square beside the bank's buttons, a coin bag with the GC and SC stacked under it */
  #bankbar { display: flex; align-items: stretch; gap: 8px; }
  #bankctl { flex: 1; min-width: 0; }
  #bankpouch { flex: none; width: 62px; margin: 0; padding: 3px 2px; display: flex; flex-direction: column; align-items: center;
               justify-content: center; gap: 1px; font-size: 11px; line-height: 1.15; white-space: nowrap; overflow: hidden; }
  #bankpouch .bag { display: flex; width: 24px; height: 24px; }
  #bankpouch .bag svg { width: 24px; height: 24px; }
  #bankpouch b { font-variant-numeric: tabular-nums; }
  #pouchsc b, #banksc b { color: #d8dde3; }
  #pouch.banking, #bankpouch { cursor: pointer; }
  #pouch.banking:hover, #bankpouch:hover { border-color: #e0a020; }
  .mk-ask { display: flex; flex: none; align-items: center; gap: 4px; margin: 6px 10px 0; font-size: 12.5px; }
  .mk-ask[hidden] { display: none; }
  .mk-ask label { white-space: nowrap; }
  .mk-ask input { flex: 1; min-width: 0; font: inherit; padding: 3px 4px; border: 1px solid var(--edge); border-radius: 3px; background: var(--slot); color: var(--ink); }
  .mk-ask button { width: auto; flex: none; margin: 0; padding: 3px 8px; font-size: 12.5px; }
  /* The minimap corner (the minimap with its compass and map button, and the health and run orbs) keeps one size
     whatever the interface size (--ui): --mmk, 1 on a big screen and a little smaller on a small one. It's laid out
     at 136 px (the minimap) and 54 px (the orbs), then scaled by --mmk. */
  :root { --mmk: 1; }
  @media (max-width: 520px), (max-height: 520px) { :root { --mmk: 0.82; } }
  #minimap { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: calc(10px + env(safe-area-inset-left, 0px));
             width: 136px; height: 136px; transform: scale(var(--mmk, 1)); transform-origin: top left; }
  #mmcanvas { display: block; width: 136px; height: 136px; border-radius: 50%; border: 3px solid var(--edge); box-sizing: border-box;
              background: #cbb88a; box-shadow: 0 2px 8px rgba(0,0,0,0.4); cursor: pointer; touch-action: none; }
  #compass, #mapbtn { position: absolute; width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 50%; line-height: 1; }
  /* The compass: an SVG, so it's sharp at any size. Only its card (#compasscard) turns, by its transform attribute. */
  #compass { left: -10px; top: -10px; width: 48px; height: 48px; background: none; border: 0; -webkit-tap-highlight-color: transparent;
             filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45)); }
  #compass svg { display: block; width: 100%; height: 100%; overflow: visible; }
  #compass:hover { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45)) brightness(1.08); }
  #compass:active svg { transform: scale(0.95); }
  #mapbtn { right: -6px; bottom: -6px; font-size: 18px; }
  /* The clock: a small plate under the minimap, inside the corner (so it scales with --mmk, not --ui), clear of the map
     button (which reaches 142 px down). Two centred lines: the in-game time with its sun or moon, large and bold, and
     the device's time under it, smaller and dimmer. One line alone (In-game or Real time) makes it shorter (.one). */
  #clock { position: absolute; left: 16px; top: 146px; width: 104px; height: 34px; box-sizing: border-box;
           display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 6px;
           overflow: hidden; white-space: nowrap;
           background: rgba(20, 14, 6, 0.84); border: 2px solid var(--edge); border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
           color: #f3e6c2; font-family: "Palatino Linotype", Palatino, Georgia, serif; font-variant-numeric: tabular-nums;
           text-shadow: 0 1px 1px #000; pointer-events: none; user-select: none; -webkit-user-select: none; }
  #clock.one { height: 22px; }
  #clock[hidden], #clock [hidden] { display: none; }
  /* Each line is a three-column grid, hours | separator | minutes, with equal side columns (minmax 0: never widened by what they hold), so the separator sits on the
     plate's centre, which is the minimap's (the plate is centred with equal padding). The sun or moon goes left of the
     hours and a 12-hour clock's AM/PM right of the minutes, so neither moves the separator; the digits are tabular. */
  .clkrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: 100%; }
  .clkh { justify-self: end; display: flex; align-items: center; gap: 4px; }
  .clkm { justify-self: start; display: flex; align-items: baseline; }
  .clksep { padding: 0 1px; }
  #clockgame { font-size: 15px; font-weight: bold; line-height: 16px; }
  #clockicon { display: block; width: 15px; height: 15px; flex: none; }
  #clockicon .ico { width: 15px; height: 15px; }
  #clockreal { color: #b9ad90; font-size: 10.5px; line-height: 11px; }
  #clockrpre:not(:empty) { margin-right: 2px; }
  #clockrpost:not(:empty) { margin-left: 2px; }
  #clockrpre, #clockrpost { font-size: 0.8em; }
  #clock.one #clockreal { color: #d9ccb0; font-size: 13px; line-height: 14px; font-weight: bold; }   /* alone: a little larger */
  #worldmap {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: min(560px, 94vw, calc(100vh - 84px));
    background: var(--panel); border: 3px solid var(--edge); border-radius: 5px; box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  }
  #worldmap[hidden] { display: none; }
  #worldmap .uihead { cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; padding: 7px 10px 6px; }
  #worldmap.moving { box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
  #wmview { position: relative; aspect-ratio: 1; overflow: hidden; border-bottom: 2px solid var(--edge); background: #cbb88a; }
  #wmcanvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
  #wmcanvas.panning { cursor: grabbing; }
  #wmtools { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 5px; }
  #wmtools button { width: 32px; height: 32px; margin: 0; padding: 0; font-size: 18px; line-height: 1; font-weight: bold; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
  #wmhint { font-size: 12px; padding: 5px 10px 7px; opacity: 0.85; }
  #wmclose { width: auto; margin: 0; padding: 2px 9px; font-size: 16px; }
  #hovertip { position: fixed; z-index: 7; pointer-events: none; padding: 3px 8px; border-radius: 3px; white-space: nowrap;
              background: rgba(20, 14, 6, 0.86); color: #fff; font: 13px "Palatino Linotype", Palatino, Georgia, serif; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
  #hovertip[hidden] { display: none; }
  #hovertip span { color: #ffe27a; }
  #hovertip em, #gmenu em { font-style: normal; }
  em.lv-hi { color: #ff5a4a !important; font-weight: bold; }   /* 5+ levels above you: dangerous */
  em.lv-eq { color: #ffe27a !important; }
  em.lv-lo { color: #7fe07a !important; }
  #hovertip.plain { color: #d9ccb0; }
  /* Panel buttons sit in one row, in document order. Settings is always last, so it stays on the far right. */
  #panelbar { position: fixed; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 6px;
              transform: scale(var(--ui, 1)); transform-origin: bottom right; }
  #panelbar button { width: auto; margin: 0; padding: 8px 12px; font-size: 26px; line-height: 1; }
  #panelbar #setbtn { order: 99; }   /* belt and braces: even if a new button is added after it, Settings stays rightmost */
  #panelbar button .ico { width: 26px; height: 26px; display: block; }   /* a drawn icon on a panel button (the quest journal's scroll) */
  /* The spell book (15k-spells.js): a grid of spell icons the bag's size, the autocast one lit gold, the one the box
     describes outlined; the box under it (the spell's name, what it does, its cost and weapon; red if it's locked) */
  #spellsum { font-size: 12px; opacity: 0.8; }
  .spell-grid > i .ico { width: 26px; height: 26px; }
  .spell-grid > i.on { background: rgba(212, 167, 58, 0.45); box-shadow: inset 0 0 0 2px #e6b94a; }
  .spell-grid > i.sel { outline: 2px solid #f1e6c8; outline-offset: -3px; }
  .spell-grid > i.pad { cursor: default; }
  .spell-box { margin-top: 8px; padding: 6px 8px; height: 96px; overflow: hidden; box-sizing: content-box; border-radius: 3px; background: var(--slot); border: 1px solid var(--edge); font-size: 12.5px; line-height: 1.35; }
  .spell-box b { font-size: 13.5px; }
  .spell-box small { opacity: 0.85; font-size: 11.5px; }
  .spell-box small.req { color: #ff4a36; font-weight: bold; opacity: 1; }
  /* The quest journal (15j-quests.js): its sections, and each quest's row: not started red, going yellow, done green */
  #questsum { font-size: 12px; opacity: 0.8; }
  .quest-sec h3 { margin: 8px 0 4px; font-size: 13px; }
  .quest-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 52vh; }
  .quest-sec { display: flex; flex-direction: column; gap: 3px; }
  .mk-row.quest { padding: 4px 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.18); }
  .mk-row.quest .t { font-weight: bold; }
  .mk-row.quest.q-none .t { color: #ff7a66; }
  .mk-row.quest.q-active .t { color: #ffd24a; }
  .mk-row.quest.q-done .t { color: #7fe07a; }
  /* A conversation (15i-dialogue.js): who's speaking, their line, and the choices, below the middle of the screen */
  #dialogueui.mk-center { top: 64%; }
  #dialogueui .uihead h2 { color: #ffd27a; }
  #dialogueui.mine .uihead h2 { color: #a9d0ff; }
  .dlg-line { margin: 10px 12px 8px; font-size: 15px; line-height: 1.4; }
  .dlg-choices { display: flex; flex-direction: column; gap: 4px; padding: 0 10px 10px; overflow-y: auto; }
  .dlg-choice { margin: 0; text-align: left; padding: 6px 10px; font-size: 14px; }
  .dlg-n { font-weight: bold; opacity: 0.7; }
  #equip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
  .eq { margin: 0; padding: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 24px; }
  .eq.empty { font-size: 11px; opacity: 0.55; cursor: default; }
  .eq { position: relative; }
  .eq .eqn { position: absolute; top: 1px; left: 3px; font-size: 10px; font-weight: bold; color: #f0c850; text-shadow: 0 0 2px #000, 0 0 2px #000; }   /* the ammunition slot's count */
  #eqstats { margin-top: 8px; font-size: 13px; line-height: 1.4; }
  #stances { display: flex; gap: 4px; margin-top: 8px; }
  #stances button { margin: 0; padding: 6px 2px; font-size: 12px; }
  #stances button.on { background: var(--bar); color: #fff; border-color: #2f4d18; }
  #retaliate { margin-top: 6px; font-size: 12.5px; }
  #retaliate.on { background: var(--bar); color: #fff; border-color: #2f4d18; }
  #stancecap { margin-top: 4px; font-size: 11.5px; line-height: 1.35; opacity: 0.85; }
  #gmenu button:disabled { opacity: 0.55; cursor: default; }
  .tint-iron { filter: grayscale(1) brightness(0.95); }
  .tint-raw { filter: saturate(0.7) hue-rotate(-25deg) brightness(1.25); }
  .tint-oak { filter: sepia(0.35) brightness(0.92); }
  .tint-willow { filter: hue-rotate(40deg) saturate(0.8) brightness(1.1); }
  .tint-maple { filter: hue-rotate(-20deg) saturate(1.7); }
  .tint-yew { filter: brightness(0.6) saturate(1.2); }
  .tint-magic { filter: hue-rotate(180deg) saturate(1.6) brightness(1.3); }
  .tint-venom { filter: hue-rotate(60deg) saturate(1.4); }
  .tint-burnt { filter: grayscale(0.7) brightness(0.3) contrast(1.4); }
  .tint-cooked { filter: sepia(0.7) saturate(1.3) brightness(0.85); }
  .ico { width: 1.25em; height: 1.25em; display: block; }
  h2 .ico, .xpdrop .ico, #lvlup .ico, #gmenu button .ico, .skhead .ico { display: inline-block; vertical-align: -0.24em; }
  .skill .ico { width: 1em; height: 1em; }
  #gmenu .ico { display: inline-block; vertical-align: -0.25em; }
  .tint-steel { filter: grayscale(1) brightness(1.35); }
  #lvlup {
    position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translateX(-50%) scale(var(--ui, 1));
    transform-origin: top center; padding: 8px 16px; border-radius: 6px; border: 2px solid #7a5a12; pointer-events: none;
    background: linear-gradient(#f7d774, #d9a92e); color: #3b2a08; font-weight: bold; font-size: 16px; text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45); white-space: nowrap;
  }
  #lvlup[hidden] { display: none; }
  #lvlup small { display: block; font-size: 12px; font-weight: normal; }
  .hp { position: fixed; width: calc(44px * var(--ui, 1)); height: 6px; margin-left: calc(-22px * var(--ui, 1)); background: #b3261e; border: 1px solid #000; pointer-events: none; display: none; }
  .hp i { display: block; height: 100%; background: #3aa63a; }
  .splat {
    position: fixed; transform: translate(-50%, -50%); min-width: 22px; height: 22px; padding: 0 3px; box-sizing: border-box;
    border-radius: 11px; background: #c0392b; color: #fff; font: bold 13px/22px sans-serif; text-align: center;
    pointer-events: none; animation: rise 0.9s ease-out forwards;
  }
  .splat.zero { background: #2f6db5; }
  .splat.poison { background: #2e8b3a; }
  .splat.bleed { background: #6e0f12; border: 1px solid #2a0406; padding: 0 5px 0 3px; }   /* a bleed's dose (ZFG-42): dark red, a drop of blood before the number */
  .splat.bleed svg { width: 9px; height: 12px; vertical-align: -1px; margin-right: 2px; }
  #status { position: fixed; top: calc(10px + 186px * var(--mmk, 1) + env(safe-area-inset-top, 0px)); left: calc(10px + env(safe-area-inset-left, 0px));
            display: flex; flex-direction: column; gap: 6px; transform: scale(var(--ui, 1)); transform-origin: top left; pointer-events: none; }
  #minimap.noclock ~ #status { top: calc(10px + 148px * var(--mmk, 1) + env(safe-area-inset-top, 0px)); }   /* (below the clock, or the corner with it off) */
  #status:empty { display: none; }
  .fx { display: flex; gap: 8px; align-items: center; max-width: 230px; padding: 6px 10px; border-radius: 5px;
        font: 13px/1.3 "Palatino Linotype", Palatino, Georgia, serif; color: #e9f8dc; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
  .fx.buff { background: rgba(58, 44, 12, 0.9); border: 2px solid #d4a73a; }       /* (a kind's type: buff or debuff) */
  .fx.debuff { background: rgba(58, 20, 18, 0.9); border: 2px solid #b8453a; }
  .fx.poison { background: rgba(24, 58, 22, 0.9); border: 2px solid #4fae45; }
  .fx.bleed { background: rgba(70, 14, 12, 0.9); border: 2px solid #d8342c; }
  .fx.rooted { background: rgba(40, 34, 24, 0.9); border: 2px solid #c8b48a; }
  .fx b { display: block; font-size: 14px; }
  .fx i { font-style: normal; font-size: 22px; flex: none; }
  .fx i .fx-ico { display: block; width: 26px; height: 26px; }
  .hp .hpfx { position: absolute; left: 0; bottom: 8px; display: flex; gap: 1px; }   /* a creature's effects, over its health bar */
  .hp .hpfx .fx-ico { display: block; width: 14px; height: 14px; }
  .fxi { position: relative; display: block; }   /* an effect icon with a pie timer: the dark sweep is the time gone */
  .fxpie { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
           background: conic-gradient(transparent 0 calc(var(--left, 1) * 360deg), rgba(10, 6, 2, 0.6) 0); }
  .fx.resist { padding: 3px 9px; font-size: 11.5px; opacity: 0.85; background: rgba(40, 34, 24, 0.8); border: 1px dashed #c8b48a; }
  @keyframes rise { to { transform: translate(-50%, -150%); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .splat { animation-name: fade; } @keyframes fade { to { opacity: 0; } } }
  #inv i { aspect-ratio: 1; background: var(--slot); border: 1px solid var(--edge); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 18px; position: relative; }
  #inv b { position: absolute; top: 0; left: 2px; font-size: 9px; color: #b8860b; }
  #inv { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  #inv i.full { cursor: grab; }
  #inv i.sel { outline: 2px solid #e0a020; background: #e9d49a; }
  #inv i.lifted > * , #inv i.lifted { color: transparent; }
  #inv i.lifted svg, #inv i.lifted span { opacity: 0.25; }
  #inv i.over { outline: 2px dashed #e0a020; outline-offset: -2px; }
  #dragghost {
    position: fixed; z-index: 7; pointer-events: none; font-size: calc(22px * var(--ui, 1)); line-height: 1;
    transform: translate(-50%, -60%); filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5));
  }
  #dragghost .ico { width: 1.25em; height: 1.25em; }
  #dragghost[hidden] { display: none; }
  #invtools { display: flex; gap: 4px; }
  #sortinv { width: auto; margin: 0; padding: 1px 8px; font-size: 13px; font-weight: bold; }
  #dropmode { width: auto; margin: 0; padding: 1px 7px; font-size: 11px; }
  #dropmode.on { background: #b3261e; color: #fff; border-color: #6d1510; }
  #invpanel.dropping #inv i.full { cursor: pointer; }
  button {
    margin-top: 8px; width: 100%; font: inherit; font-size: 13px; padding: 5px;
    background: var(--slot); color: var(--ink); border: 1px solid var(--edge); border-radius: 3px; cursor: pointer;
  }
  button:focus-visible { outline: 3px solid var(--bar); }
  #xpdrops {
    position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 0; right: 0; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  .xpdrop {
    font: bold calc(18px * var(--ui, 1)) "Palatino Linotype", Palatino, Georgia, serif; color: #fff;
    text-shadow: 0 1px 3px #000, 0 0 2px #000; animation: xpfall 1.6s ease-out forwards;
  }
  @keyframes xpfall { 0% { opacity: 0; transform: translateY(-8px); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } }
  @media (prefers-reduced-motion: reduce) { .xpdrop { animation-name: xpfade; } @keyframes xpfade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } }
  #hporb {
    position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px));
    width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 3px solid var(--edge);
    background: #3a0d0a; transform: scale(var(--mmk, 1)); transform-origin: top right; pointer-events: none;
  }
  #hporb i { position: absolute; left: 0; right: 0; bottom: 0; background: #c0392b; transition: height 0.3s; }
  #hporb span {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; font: bold 17px/1 "Palatino Linotype", Palatino, Georgia, serif; text-shadow: 0 1px 2px #000;
  }
  #hporb small { font-size: 11px; margin-bottom: 2px; }
  #runorb {
    position: fixed; top: calc(72px * var(--mmk, 1) + 10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px));
    width: 54px; height: 54px; margin: 0; padding: 0; border-radius: 50%; overflow: hidden; border: 3px solid var(--edge);
    background: #3b3208; transform: scale(var(--mmk, 1)); transform-origin: top right; cursor: pointer;
  }
  #runorb i { position: absolute; left: 0; right: 0; bottom: 0; background: #b58a12; transition: height 0.3s; }
  #runorb.on { border-color: #ffd23f; box-shadow: 0 0 0 2px #000, 0 0 10px #ffd23f; }
  #runorb.on i { background: #e5b319; }
  #runorb span {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; font: bold 17px/1 "Palatino Linotype", Palatino, Georgia, serif; text-shadow: 0 1px 2px #000;
  }
  #runorb small { font-size: 12px; margin-bottom: 2px; }
  /* Context menus: a compact list (OSRS style), always on top of every window */
  #gmenu {
    position: fixed; z-index: 20; min-width: 132px; max-width: 78vw; max-height: 60vh; overflow-y: auto; padding: 0 0 2px;
    background: #2a1d10; border: 2px solid var(--edge); border-radius: 3px; box-shadow: 0 4px 14px rgba(0,0,0,0.55);
    transform: scale(var(--ui, 1)); transform-origin: top left; color: #f2e6c8;
  }
  #gmenu[hidden] { display: none; }
  #gmenu div { background: var(--edge); color: #fff; font-size: 12px; font-weight: bold; padding: 3px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #gmenu button {
    display: block; width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; color: #f2e6c8;
    text-align: left; font-size: 13px; line-height: 1.25; padding: 4px 10px; white-space: nowrap;
  }
  #gmenu button + button { border-top: 1px solid rgba(154, 116, 68, 0.28); }
  #gmenu button:hover, #gmenu button:focus-visible { background: rgba(224, 160, 32, 0.28); outline: none; }
  #gmenu button:last-child { color: #c9b890; }          /* Cancel */
  #gmenu button small { opacity: 0.75; }
  @media (pointer: coarse) { #gmenu button { padding: 8px 12px; font-size: 14px; } }   /* roomier rows for fingers */
  #msg { display: none; }
  /* The title screen: login and character select. It covers everything; while it's up (html.intitle) the HUD is hidden
     and the game is paused (24-frame). The class is set by a little script in the page's head, before the game loads. */
  #lobby { --tsky1: #0d0a05; --tsky2: #3a2b17; --tsun: #e9dcb4; --tstar: #ecdcb5; --tfar: #3b2e1a;
           --tmid: #2c2213; --tpine: #19130a; --tnear: #221a0e; --ttile: rgba(236, 220, 181, 0.08); }
  html.intitle body > :not(#lobby) { display: none !important; }   /* no world, HUD or popups behind the title screen */
  #lobby { position: fixed; inset: 0; z-index: 40; display: flex; overflow-y: auto; box-sizing: border-box; color: var(--ink);
           padding: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px))
                    calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
           background: linear-gradient(180deg, var(--tsky1) 0%, var(--tsky2) 75%); }
  #lobby[hidden] { display: none; }
  html.intitle #lobby { display: flex; }   /* up from the first paint, before the game's script has run */
  #titlebg { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 58vh; pointer-events: none; }
  #titlebg .tb-sun { fill: var(--tsun); filter: drop-shadow(0 0 18px var(--tsun)); }
  #titlebg .tb-stars { fill: var(--tstar); }
  #titlebg .tb-far { fill: var(--tfar); } #titlebg .tb-mid { fill: var(--tmid); } #titlebg .tb-pines { fill: var(--tpine); }
  #titlebg .tb-near { fill: var(--tnear); } #titlebg .tb-tiles { fill: none; stroke: var(--ttile); stroke-width: 2; }
  #titlecol { position: relative; margin: auto; width: min(440px, 100%); display: flex; flex-direction: column; gap: 14px; }
  #titlehead { text-align: center; }
  #titlecrest { display: block; width: 76px; height: 76px; margin: 0 auto 2px; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3)); }
  #titlecrest .tc-shield { fill: var(--panel); stroke: var(--edge); stroke-width: 3; }
  #titlecrest .tc-tools { stroke: #6b4a22; stroke-width: 4; stroke-linecap: round; }
  #titlecrest .tc-head { fill: #a9b0b4; stroke: #3b2a14; stroke-width: 1.5; stroke-linejoin: round; }
  #gametitle { margin: 0; font-size: clamp(34px, 9vw, 84px); line-height: 1.05; font-weight: bold; font-variant: small-caps; letter-spacing: 0.04em;
               color: #e8b44a; background: linear-gradient(180deg, #fff3c4 0%, #f2c75c 42%, #b87620 54%, #e3ac42 78%, #fbe39a 100%);
               -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
               filter: drop-shadow(1.5px 0 0 #3b2410) drop-shadow(-1.5px 0 0 #3b2410) drop-shadow(0 1.5px 0 #3b2410) drop-shadow(0 -1.5px 0 #3b2410)
                       drop-shadow(0 5px 6px rgba(0,0,0,0.35)); }
  #lobby.inner #titlecrest { display: none; }                           /* choosing or making a character: a smaller title */
  #lobby.inner #gametitle { font-size: clamp(28px, 6.5vw, 50px); }
  #lobbycard { background: var(--panel); border: 3px solid var(--edge); border-radius: 8px; padding: 18px 18px 14px; color: var(--ink);
               box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px rgba(122, 92, 46, 0.45), 0 12px 40px rgba(0,0,0,0.4); }
  #acctbox { background: var(--slot); border: 1px solid var(--edge); border-radius: 5px; padding: 10px 12px; margin-bottom: 12px; }
  #acctline { font-weight: bold; }
  #acctnote { display: block; margin-top: 4px; font-size: 12px; opacity: 0.8; line-height: 1.4; }
  #continue { font-size: 17px; padding: 11px; font-weight: bold; letter-spacing: 0.05em; background: var(--bar); color: #fff; border-color: #2f4d18; }
  #continue:disabled { opacity: 0.5; }
  #createwrap { display: flex; gap: 10px; align-items: flex-start; }
  #createpreview { width: 150px; height: 190px; flex: none; border-radius: 6px; cursor: grab; touch-action: none;
                   background: radial-gradient(ellipse at 50% 75%, #8fbf5a 0%, #5f8f3a 60%, #3e6428 100%); border: 1px solid var(--edge); }
  #lookopts { flex: 1; min-width: 0; font-size: 12px; }
  #lookopts .lrow { margin-bottom: 7px; }
  #lookopts .lrow > b { display: block; font-size: 12px; margin-bottom: 3px; }
  #lookopts .opts { display: flex; flex-wrap: wrap; gap: 3px; }
  #lookopts .opts button { width: auto; margin: 0; padding: 3px 7px; font-size: 11.5px; }
  #lookopts .opts button.on { background: var(--bar); color: #fff; border-color: #2f4d18; }
  #lookopts .sw { width: 22px !important; height: 22px; padding: 0 !important; border-radius: 50%; border: 2px solid rgba(0,0,0,0.25) !important; }
  #lookopts .sw.on { outline: 2px solid #e0a020; outline-offset: 1px; }
  #newname { font: inherit; font-size: 14px; padding: 7px 9px; width: 100%; box-sizing: border-box; margin-top: 4px; border: 1px solid #7a5c2e; border-radius: 4px; background: #fff8e8; color: #3b2a14; }
  /* The name boxes look the same in light and dark mode: fixed colours, not the theme's */
  #newname::placeholder, .charcard.new input::placeholder { color: #7a6446; opacity: 1; }
  #createmsg { min-height: 1.3em; font-size: 12.5px; color: #8a2a1a; margin: 3px 0; }
  #createview .bankbtns button { font-size: 13px; padding: 8px; }
  #createok { background: var(--bar); color: #fff; border-color: #2f4d18; font-weight: bold; }
  @media (max-width: 380px) { #createwrap { flex-direction: column; align-items: center; } #createpreview { width: 170px; height: 200px; } }
  #selhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  #selhead span { font-size: 12px; opacity: 0.75; }
  .charcard { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; background: var(--slot); border: 1px solid var(--edge);
              border-radius: 5px; padding: 9px 11px; margin-bottom: 7px; }
  .charcard .cname { font-size: 17px; font-weight: bold; }
  .charcard .cstats { grid-column: 1; font-size: 12px; opacity: 0.85; line-height: 1.45; }
  .charcard .cbtns { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 4px; }
  .charcard .cbtns button { width: auto; margin: 0; padding: 6px 14px; font-size: 13px; }
  .charcard .cplay { background: var(--bar); color: #fff; border-color: #2f4d18; font-weight: bold; }
  .charcard .cdel { font-size: 11px !important; padding: 3px 8px !important; opacity: 0.8; }
  .charcard .cdel.sure { background: #b3261e; color: #fff; opacity: 1; }
  .charcard.new { grid-template-columns: 1fr auto; }
  .charcard.new input { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid #7a5c2e; border-radius: 4px; background: #fff8e8; color: #3b2a14; width: 100%; box-sizing: border-box; }
  .charcard.import { border-style: dashed; }
  #selmsg { min-height: 1.3em; font-size: 12.5px; color: #8a2a1a; margin: 2px 0 4px; }
  button.link { width: auto; background: none; border: 0; padding: 2px 0; font-size: 12.5px; opacity: 0.8; text-decoration: underline; }
  #acctrow small { display: block; margin: 3px 0 2px; }              /* messages now go to the chat box's Events tab */
  #chatbox {
    position: fixed; left: calc(10px + env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: min(340px, calc((100vw - 34px) / var(--ui, 1) - 250px)); min-width: 180px;
    transform: scale(var(--ui, 1)); transform-origin: bottom left; z-index: 3;
    background: rgba(28, 20, 10, 0.78); border: 2px solid var(--edge); border-radius: 4px; color: #efe4c8;
    font: 12.5px/1.35 "Palatino Linotype", Palatino, Georgia, serif; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  #chattabs { display: flex; gap: 3px; padding: 3px 3px 0; }
  #chattabs button { position: relative; width: auto; margin: 0; padding: 2px 10px; font-size: 12px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  #chattabs button.on { background: var(--bar); color: #fff; border-color: #2f4d18; }
  #chattabs button .dot { position: absolute; top: 2px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #e0a020; }
  #chatmin { margin-left: auto !important; padding: 2px 8px !important; }
  #chatlog { height: 108px; overflow-y: auto; padding: 4px 7px; border-top: 1px solid var(--edge); }
  #chatlog p { margin: 0 0 1px; word-wrap: break-word; }
  #chatlog p.lvl { color: #ffd23f; font-weight: bold; }
  #chatlog p.err { color: #ff7a6a; font-weight: bold; }
  #chatlog p.note { color: #bfae88; font-style: italic; }
  #chatlog p.notice { color: #ffb45c; border-left: 2px solid #e08a2c; padding-left: 5px; }   /* the game's notices (why you can't): never a player's line */
  #chatlog p.me b { color: #7fd0ff; }
  #chatlog p em { font-style: normal; color: #bfae88; margin-left: 4px; }
  #chatinput { display: flex; gap: 4px; padding: 0 4px 4px; }
  #chatinput[hidden], #chatlog[hidden] { display: none; }
  #chattext { flex: 1; min-width: 0; font: inherit; padding: 3px 6px; border: 1px solid var(--edge); border-radius: 3px; background: #efe4c8; color: #3b2a14; }
  #chatsend { width: auto; margin: 0; padding: 2px 10px; font-size: 12px; }