/* Project RP's screens and HUD: black brushed panels, white serif small caps, red where it's bad.
   A panel (.paper) is drawn by its ::before: the panel's black, its edges torn by the #brush
   filter (index.html's SVG), a faint grain over it; buttons light up white under the pointer
   with the same torn edge. Item pictures are assets/ui/items/<icon>.png (tools/copy-icons.mjs). */

:root {
  --ink: #f2ede3; --dim: #9e978b; --faint: rgba(242, 237, 227, 0.16); --black: #0c0b0a; --panel: #0f0e0d;
  --red: #c0322a; --blood: #8e1c16; --gold: #cfae67; --slot: #262422; --slotFull: #4a4744;
  --me: #c9a0dc; --do: #9cc79a; --ooc: #9fb4c8; --pm: #e8c36a;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --streak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0025 .09' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .2 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #14120f; color: var(--ink); overflow: hidden; font: 15px/1.45 var(--serif); }
canvas { display: block; }
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
.err { color: #e0574c; min-height: 1.4em; font-size: 14px; }
.muted { color: var(--dim); }
.sc, h1, h2, h3, button, .kicker, label { font-variant: small-caps; letter-spacing: 0.06em; }
h1, h2, h3 { font-weight: bold; margin: 0 0 12px; }
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: rgba(242, 237, 227, 0.35); } ::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- the panel and its parts */
.paper, .card, #staff, #desk, #wmapNote, #notice, #spec, #help, #invMenu, #board { position: relative; isolation: isolate; }
.paper::before, .card::before, #staff::before, #desk::before, #wmapNote::before, #notice::before, #spec::before, #help::before, #board::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; will-change: transform;
  background: var(--streak), var(--grain), var(--panel); background-blend-mode: normal; opacity: 0.96;
  filter: url(#brush);
}
/* a brushed rule: under a heading, between a panel's parts */
.brule, .rule { height: 2px; margin: 8px -6px; background: var(--ink); opacity: 0.85; filter: url(#brushLine);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rule { width: 120px; margin: 12px 0 22px; }

/* buttons: words, lit white under the pointer */
button { position: relative; isolation: isolate; background: none; border: 0; padding: 6px 14px; cursor: pointer; font-weight: bold; font-size: 15px; color: var(--ink); }
button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(242, 237, 227, 0.07); filter: url(#brushThin); transition: background 0.1s; }
button:hover:not(:disabled), button:focus-visible { color: #111; outline: none; }
button:hover:not(:disabled)::before, button:focus-visible::before { background: var(--ink); }
button:disabled { opacity: 0.35; cursor: default; }
button.primary::before { background: rgba(192, 50, 42, 0.75); }
button.danger:hover:not(:disabled)::before { background: #e0574c; }
button.small { padding: 2px 9px; font-size: 13px; }
button.link::before { background: none; }
input[type=text], input[type=password], input[type=number], select, textarea {
  background: rgba(0, 0, 0, 0.45); border: 0; border-bottom: 1px solid rgba(242, 237, 227, 0.35); padding: 7px 9px; width: 100%; border-radius: 0; }
select option { background: #1b1917; }
textarea { resize: vertical; font-size: 14px; line-height: 1.35; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--ink); background: rgba(0, 0, 0, 0.6); }
input::placeholder, textarea::placeholder { color: rgba(242, 237, 227, 0.4); font-variant: small-caps; letter-spacing: 0.05em; }
input[type=range] { accent-color: var(--ink); width: 100%; }
/* a key, as on the keyboard */
.key { display: inline-block; min-width: 22px; padding: 1px 6px; text-align: center; background: var(--ink); color: #111; font: bold 12px/18px var(--serif); border-radius: 3px; box-shadow: 0 1px 0 #6d675d; }

/* ---------------------------------------------------------------- screens over the view */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20;
  background: radial-gradient(ellipse at 50% 42%, rgba(30, 26, 21, 0.45), rgba(6, 5, 4, 0.94)); }
.card { padding: 30px 36px; width: min(430px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.card.wide { width: min(1000px, calc(100vw - 32px)); }
.title { font-size: 52px; font-weight: bold; letter-spacing: 0.14em; line-height: 1; margin: 4px 0 0; }
.kicker { font-size: 13px; letter-spacing: 0.24em; color: var(--dim); font-weight: bold; }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { flex: 1; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: var(--dim); margin-bottom: 3px; font-weight: bold; }
.actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
#loading .bar { height: 3px; background: rgba(242, 237, 227, 0.14); margin-top: 14px; } #loading .bar > div { height: 100%; width: 0; background: var(--ink); transition: width 0.2s; }

/* characters */
.char { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 6px; cursor: pointer; position: relative; isolation: isolate; }
.char::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(242, 237, 227, 0.05); filter: url(#brushThin); }
.char:hover::before { background: rgba(242, 237, 227, 0.12); }
.char.sel::before { background: var(--ink); } .char.sel, .char.sel .meta { color: #111; }
.char .name { font-size: 19px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.05em; } .char .meta { font-size: 13px; color: var(--dim); }
.char > div:first-child { flex: 1; }

/* the character creator: the form, the figure turning beside it */
#creator .cols { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
@media (max-width: 760px) { #creator .cols { grid-template-columns: 1fr; } #preview { height: 260px !important; } }
#creator .opts { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; align-items: center; }
#creator .opts label { font-size: 13px; color: var(--dim); font-weight: bold; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatches button { width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; }
.swatches button::before { display: none; }
.swatches button.on { border-color: var(--ink); }
.swatches button.asMade { background: linear-gradient(135deg, #6b6052 45%, #c9bfae 45% 55%, #6b6052 55%); }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button { padding: 2px 9px; font-size: 13px; }
.seg button.on { color: #111; } .seg button.on::before { background: var(--ink); }
#preview { width: 100%; height: 460px; background: radial-gradient(ellipse at 50% 30%, #2e2924, #0d0c0a); }

/* the menu (Esc) */
#menu .card { width: min(330px, calc(100vw - 32px)); text-align: center; }
#menu h2 { font-size: 30px; letter-spacing: 0.12em; }
#menu button { display: block; width: 100%; margin-bottom: 6px; font-size: 17px; padding: 8px 14px; }
#menu button::before { background: none; } #menu button:hover::before { background: var(--ink); }

/* the staff panel (F10) and a desk's window (E at a counter) */
#staff { position: fixed; top: 60px; right: 18px; width: min(660px, calc(100vw - 36px)); max-height: calc(100vh - 120px); overflow: auto; z-index: 15; padding: 18px 22px; font-size: 14px; }
#staff table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
#staff td, #staff th { padding: 4px 6px; border-bottom: 1px solid var(--faint); text-align: left; }
#staff th { color: var(--dim); font-weight: bold; font-size: 12px; font-variant: small-caps; letter-spacing: 0.08em; }
#staff .sec { margin: 16px 0 6px; font-size: 14px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.12em; border-bottom: 1px solid var(--faint); padding-bottom: 3px; }
#staff .audit { font: 12px/1.5 Consolas, monospace; color: var(--dim); max-height: 180px; overflow: auto; }
#staff .bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#staff input[type=number], #staff input[type=text] { width: auto; padding: 3px 6px; }
/* (its body scrolls, not the window: the paper behind it covers the window, however long what's in it) */
#desk { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(580px, calc(100vw - 32px)); max-height: calc(100vh - 80px);
  display: flex; flex-direction: column; overflow: hidden; z-index: 15; padding: 20px 24px; font-size: 14px; }
#desk .dbody { overflow: auto; flex: 1 1 auto; min-height: 0; padding-right: 6px; margin-right: -6px; }
#desk .dtop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
#desk .dtop h3 { margin: 0; font-size: 22px; letter-spacing: 0.08em; }
#desk .dn { margin: 4px 0 8px; font-size: 13px; }
#desk .dmsg { margin: 10px 0; padding: 6px 12px; border-left: 3px solid var(--red); background: rgba(0, 0, 0, 0.35); }
#desk .dsec { margin-top: 14px; }
#desk .dsw { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(242, 237, 227, 0.4); }
#desk .dh { font-size: 14px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.14em; margin-bottom: 4px; color: var(--dim); }
#desk .dr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--faint); }
#desk .ds { font-size: 12px; }
#desk .db, #desk .dbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#desk .db { justify-content: flex-end; flex-shrink: 0; }
#desk .dbar { margin-top: 6px; }
#desk .dbar input { width: 9em; padding: 3px 6px; }
#desk .dbar select { width: auto; max-width: 16em; padding: 3px 6px; }
#desk .dbar textarea { flex: 1 1 100%; min-height: 4em; padding: 4px 6px; font: inherit; color: inherit; resize: vertical; }
/* a paper read or written (the satchel): a sheet of it, ink on cream */
#sheet { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-0.6deg); width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 80px);
  overflow: auto; z-index: 16; padding: 26px 30px 18px; background: #e9dfc6; color: #231d15; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); font-size: 15px; }
#sheet .shH { font-size: 20px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.06em; border-bottom: 1px solid #8a7a5c; padding-bottom: 4px; }
#sheet .shD { font-size: 12px; color: #6b5d45; margin-top: 3px; }
#sheet .shX { white-space: pre-wrap; margin: 14px 0; line-height: 1.55; }
#sheet .shBy { text-align: right; font-style: italic; margin-bottom: 10px; }
#sheet input, #sheet textarea { width: 100%; display: block; margin-bottom: 10px; padding: 5px 7px; background: rgba(255, 255, 255, 0.35); color: #231d15; border: 0; border-bottom: 1px solid #8a7a5c; font: inherit; resize: vertical; }
#sheet input[type=checkbox] { display: inline; width: auto; margin: 0 6px 0 0; }
#sheet .shS { font-size: 13px; }
#sheet .shB { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 8px; }
#sheet .shB .muted { margin-right: auto; color: #6b5d45; font-size: 12px; }
#sheet button { color: #231d15; } #sheet button:hover { color: #e9dfc6; } #sheet button:hover::before { background: #231d15; }
#desk .dfoot { margin-top: 16px; text-align: right; }
/* (a window with tabs, or goods set out as cards: wider; its body scrolls under the tabs) */
#desk.wide { width: min(780px, calc(100vw - 32px)); height: min(640px, calc(100vh - 80px)); }
#desk .dtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--faint); }
#desk .dtabs button { padding: 4px 12px; }
#desk .dtabs button.on { color: #111; } #desk .dtabs button.on::before { background: var(--ink); }
#desk .dt { flex: 1 1 200px; min-width: 0; }
#desk .dr { flex-wrap: wrap; }
#desk .dr .db { flex: 0 1 auto; margin-left: auto; }
#desk .dtag { font-size: 11px; font-variant: small-caps; letter-spacing: 0.08em; color: var(--gold); margin-left: 4px; white-space: nowrap; }
/* (gauges: a horse's feed and shoes, a car's petrol) */
#desk .dgs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
#desk .dg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); font-variant: small-caps; letter-spacing: 0.06em; }
#desk .dg i { display: block; width: 64px; height: 6px; background: rgba(242, 237, 227, 0.12); }
#desk .dg b { display: block; height: 100%; background: var(--do); }
#desk .dg.mid b { background: var(--gold); } #desk .dg.low b { background: var(--red); } #desk .dg.low { color: #e0574c; }
/* (goods as cards: name, price under it, the button at its foot) */
#desk .dsec.grid .drs { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
#desk .dsec.grid .dr { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 6px; padding: 8px 10px; border: 1px solid var(--faint); background: rgba(0, 0, 0, 0.25); }
#desk .dsec.grid .dt { flex: 0 0 auto; }
#desk .dsec.grid .dr .db { margin-left: 0; justify-content: flex-start; }
/* (the showroom's card, at the side: what's shown, its price, Buy and Back) */
#showroom { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); width: min(300px, calc(100vw - 32px)); padding: 16px 18px; z-index: 20; display: flex; flex-direction: column; gap: 8px; }
#showroom h3 { margin: 0; }
#showroom .srtop { display: flex; align-items: center; justify-content: space-between; }
#showroom .srsub { color: var(--gold); }
#showroom .srnote, #showroom .srhint { font-size: 12px; }
#showroom .srbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#showroom input { width: 100%; box-sizing: border-box; }
#showroom { max-height: calc(100vh - 80px); overflow: auto; }
#showroom .srh { font-variant: small-caps; letter-spacing: 0.08em; color: var(--dim); font-size: 12px; margin-top: 4px; }
#showroom .srf { display: flex; align-items: center; gap: 8px; } #showroom .srf select { flex: 1; }
#showroom .chips { display: flex; flex-wrap: wrap; gap: 4px; }
#showroom .chip { display: flex; flex-direction: column; align-items: flex-start; padding: 3px 8px; line-height: 1.2; }
#showroom .chip span { font-size: 10px; color: var(--gold); min-height: 10px; }
#showroom .chip.on { color: #111; } #showroom .chip.on::before { background: var(--ink); } #showroom .chip.on span { color: #3a2a12; }

/* ---------------------------------------------------------------- the HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.6); }
/* top left: who you are; top right: the time, the day, your money */
#plate { position: absolute; top: 16px; left: 20px; }
#plate .nm { font-size: 20px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.08em; }
#status { font-size: 13px; color: var(--dim); font-variant: small-caps; letter-spacing: 0.06em; }
#clock { position: absolute; top: 14px; right: 20px; text-align: right; }
#clock .t { font-size: 28px; font-weight: bold; letter-spacing: 0.06em; line-height: 1.1; }
#clock .d { font-size: 13px; color: var(--dim); font-variant: small-caps; letter-spacing: 0.08em; }
#cash { margin-top: 6px; font-size: 18px; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; }
.coin { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); font: bold 13px/1 var(--serif); text-shadow: none; }
#rail { position: absolute; top: 104px; right: 20px; text-align: right; font-size: 13px; line-height: 1.45; color: var(--dim); }
#rail b { color: var(--ink); font-variant: small-caps; letter-spacing: 0.06em; }
#wayHud { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-size: 16px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.06em; }
#wayHud .arrow { display: inline-block; font-size: 22px; line-height: 1; }
/* a word in the middle of the screen */
#notice { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); padding: 10px 34px; font-size: 19px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.06em;
  text-align: center; transition: opacity 0.6s; opacity: 0; max-width: min(640px, 90vw); }
#notice:empty { display: none; }
#tags { position: absolute; inset: 0; }
.tag { position: absolute; left: 0; top: 0; font: bold 13px/1 var(--serif); font-variant: small-caps; letter-spacing: 0.05em; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; text-align: center; }
.tag .desc { font: italic 12px/1.3 var(--serif); font-variant: normal; letter-spacing: 0; white-space: normal; width: 240px; margin: 3px auto 0; color: rgba(255, 255, 255, 0.85); }
.tag .desc:empty { display: none; }
.tag.wanted { color: #ff9a8a; }
.tag.say { font: italic 14px/1.3 var(--serif); font-variant: normal; letter-spacing: 0; white-space: normal; max-width: 300px; width: max-content; padding: 4px 9px; border-radius: 6px; background: rgba(28, 22, 16, 0.72); color: #f4ecd6; text-shadow: none; }
#board { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; padding: 16px 22px; z-index: 12; }
#board h3 { margin: 0 0 6px; font-variant: small-caps; letter-spacing: 0.05em; }
#board table { width: 100%; border-collapse: collapse; }
#board td { padding: 3px 6px; border-bottom: 1px solid var(--faint); }
#board td:first-child { width: 48px; color: var(--dim); }
#staff .scard { border: 1px solid var(--faint); padding: 8px 10px; margin: 8px 0 12px; }
#staff .scard .bar { margin-top: 6px; }
#spec { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); padding: 7px 18px; font-variant: small-caps; letter-spacing: 0.05em; }
#voiceOn { position: absolute; left: 20px; top: 64px; font-size: 13px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.06em; }
#voiceOn::first-letter { color: var(--red); }
#talkers { position: absolute; left: 20px; top: 84px; white-space: pre; font-size: 13px; }

/* the bottom: what you're busy at, your cores (health, food, water, wind; bleeding, drink), the hotbar */
#bottom { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; }
#busy { width: 280px; text-align: center; font-size: 14px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.06em; }
#busy .b { height: 4px; background: rgba(0, 0, 0, 0.55); margin-top: 4px; } #busy .b > div { height: 100%; width: 0; background: var(--ink); }
#cond { font-size: 12px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.14em; min-height: 1em; }
#cond.bad { color: #ff6a5c; }
#law { font-size: 12px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.1em; color: #e8d9a8; min-height: 0; }
#law.bad { color: #ff6a5c; }

/* the lockpick: a mark sweeps the bar; set each pin with it in the sweet spot */
#pick { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); width: 340px; padding: 12px 16px 10px; background: rgba(20, 14, 8, 0.82);
  border: 1px solid rgba(232, 217, 168, 0.35); color: #f1e6c8; text-align: center; pointer-events: none; }
#pick .h { font-size: 15px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.1em; margin-bottom: 8px; }
#pick .bar { position: relative; height: 14px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(232, 217, 168, 0.3); }
#pick .spot { position: absolute; top: 0; bottom: 0; background: rgba(176, 210, 120, 0.55); }
#pick .mk { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 4px #000; }
#pick.miss .bar { border-color: #ff6a5c; background: rgba(120, 20, 10, 0.55); }
#pick .pins { margin-top: 8px; display: flex; gap: 6px; justify-content: center; }
#pick .pins span { width: 10px; height: 18px; border: 1px solid rgba(232, 217, 168, 0.5); }
#pick .pins span.set { background: #b0d278; }
#pick .pins span.now { border-color: #fff; }
#pick .s { margin-top: 6px; font-size: 11px; opacity: 0.75; }
/* handwork at a bench (Handwork.js): the work's in the world; only what the keys do, along the top */
#handTip { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); max-width: 52%; padding: 5px 12px; background: rgba(20, 14, 8, 0.7);
  border: 1px solid rgba(232, 217, 168, 0.3); color: #f1e6c8; font-size: 12px; text-align: center; pointer-events: none; }
/* (the hands on a piece of work: what's said faded back and the hotbar and gauges put by, so the bench reads) */
body.handwork #chat:not(.open) #chatLog { opacity: 0.3; }
body.handwork #cores, body.handwork #hotbar, body.handwork #cond { visibility: hidden; }
/* a fish on the line: its strain kept in the band, the fish tiring */
#line { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); width: 320px; padding: 10px 14px 8px; background: rgba(20, 14, 8, 0.82);
  border: 1px solid rgba(232, 217, 168, 0.35); color: #f1e6c8; text-align: center; pointer-events: none; }
#line .h { font-size: 14px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.1em; margin-bottom: 6px; }
#line.bite .h { color: #ffd36a; }
#line .bar { position: relative; height: 14px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(232, 217, 168, 0.3); }
#line .band { position: absolute; top: 0; bottom: 0; background: rgba(176, 210, 120, 0.45); }
#line .mk { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 4px #000; }
#line.taut .bar { border-color: #ff6a5c; background: rgba(120, 20, 10, 0.55); }
#line.slack .bar { border-color: #8fb8e0; }
#line .tire { margin-top: 6px; height: 5px; background: rgba(0, 0, 0, 0.5); }
#line .tire div { height: 100%; width: 0; background: #d9b25a; }
#line .s { margin-top: 6px; font-size: 11px; opacity: 0.75; }
#cores { display: flex; gap: 9px; }
.core { position: relative; width: 42px; height: 42px; }
.core svg.ring { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.core .bg { fill: rgba(8, 7, 6, 0.82); stroke: rgba(242, 237, 227, 0.2); stroke-width: 2.4; }
.core .fl { fill: none; stroke: var(--ink); stroke-width: 2.4; transition: stroke-dashoffset 0.4s; }
.core svg.g { position: absolute; left: 11px; top: 11px; width: 20px; height: 20px; fill: var(--ink); filter: drop-shadow(0 0 1px #000); }
.core.low .fl { stroke: var(--red); } .core.low svg.g { fill: #ff6a5c; animation: pulse 0.9s infinite alternate; }
.core.bleed .fl { stroke: var(--red); } .core.bleed svg.g { fill: #ff6a5c; }
@keyframes pulse { from { opacity: 1; } to { opacity: 0.35; } }
#hotbar { display: flex; gap: 5px; }
.hs { width: 56px; height: 56px; position: relative; background: rgba(12, 11, 10, 0.72); box-shadow: inset 0 0 0 1px rgba(242, 237, 227, 0.14); }
.hs.full { background: linear-gradient(160deg, rgba(80, 76, 72, 0.88), rgba(46, 44, 41, 0.88)); }
.hs img { position: absolute; inset: 5px; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)); }
.hs .k { position: absolute; top: 1px; left: 4px; font: bold 11px/1.3 var(--serif); color: var(--dim); z-index: 1; }
.hs.held { box-shadow: inset 0 0 0 2px var(--ink), 0 0 10px rgba(242, 237, 227, 0.25); }
.hs.held .k { color: var(--ink); }
/* a count: a white disc at the corner */
.cnt { position: absolute; right: -5px; bottom: -5px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: var(--ink); color: #111;
  font: bold 12px/21px var(--serif); text-align: center; text-shadow: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); z-index: 2; }

/* what E (or F) would do; bottom right, over the gun's rounds */
#prompt { position: absolute; right: 26px; bottom: 112px; display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.05em; }
#prompt .key { font-size: 13px; line-height: 22px; min-width: 26px; }
/* through a gas mask's eyepieces (fogged a little at their edges), through field glasses (Battle.js) */
#maskView, #glassView { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#maskView .glass { fill: rgba(150, 165, 140, 0.1); }
#maskView .rim { fill: none; stroke: #23211d; stroke-width: 3.2; filter: drop-shadow(0 0 2px rgba(220, 225, 215, 0.35)); }
#glassView .reticle { fill: none; stroke: rgba(10, 10, 10, 0.55); stroke-width: 0.25; }
#cross { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: 0 0 2px #000; }
#cross.gun { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: none; border: 1.5px solid rgba(255, 255, 255, 0.55); }
#cross.aim { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border: none; background: rgba(255, 255, 255, 0.9); }
/* the third eye (Alt held): dim, open on nothing; gold, lit on what can be used, its name under it */
#eye { position: absolute; left: 50%; top: 50%; width: 40px; height: 24px; margin: -12px 0 0 -20px; filter: drop-shadow(0 1px 2px #000); }
#eye svg { display: block; width: 100%; height: 100%; overflow: visible; }
#eye .lid { fill: rgba(12, 11, 10, 0.25); stroke: rgba(242, 237, 227, 0.6); stroke-width: 2; transition: stroke 0.12s, fill 0.12s; }
#eye .iris { fill: none; stroke: rgba(242, 237, 227, 0.6); stroke-width: 1.6; transition: stroke 0.12s, fill 0.12s; }
#eye .pupil { fill: rgba(242, 237, 227, 0.6); }
#eye.lit .lid { stroke: var(--gold); fill: rgba(207, 174, 103, 0.18); }
#eye.lit .iris { stroke: var(--gold); fill: rgba(207, 174, 103, 0.55); }
#eye.lit .pupil { fill: #111; }
#eye .n { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); white-space: nowrap; font-size: 16px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.05em; }
#eye .n.dim { font-size: 13px; font-weight: normal; color: var(--dim); }
#eye.open .n { visibility: hidden; }
#eyeMenu { position: fixed; z-index: 31; min-width: 190px; padding: 4px 0; background: var(--ink); color: #111; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7); }
#eyeMenu .h { padding: 3px 14px 5px; margin-bottom: 3px; font-size: 13px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.06em; border-bottom: 1px solid rgba(17, 17, 17, 0.25); }
#eyeMenu button { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; color: #111; font-size: 13px; padding: 4px 14px; }
#eyeMenu button::before { background: none; filter: none; }
#eyeMenu button:hover:not(:disabled) { color: var(--ink); }
#eyeMenu button:hover:not(:disabled)::before { background: #111; }
#eyeMenu button:disabled { color: #8a8377; cursor: default; }
#eyeMenu .k { min-width: 10px; font-size: 11px; color: #8a8377; }
#eyeMenu .far { margin-left: auto; padding-left: 10px; font-size: 11px; font-weight: normal; font-style: italic; color: #8a8377; }
#eyeMenu::after { content: ''; position: absolute; left: -7px; top: 12px; border: 7px solid transparent; border-left: 0; border-right-color: var(--ink); }
/* the cards something's waiting on us for (Prompts.js): down the right, the newest on top, its first button Y */
#cards { position: absolute; right: 20px; top: 112px; width: min(300px, 80vw); display: flex; flex-direction: column; gap: 8px; text-shadow: none; }
#cards .pcard { pointer-events: auto; padding: 7px 12px 8px; background: var(--ink); color: #111; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6); opacity: 0.86; }
#cards .pcard.first { opacity: 1; }
#cards .h { font-size: 14px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.06em; }
#cards .t { margin-top: 2px; font-size: 13px; line-height: 1.3; }
#cards .s { margin-top: 3px; font-size: 12px; font-style: italic; color: #5d574d; }
#cards .way { font-style: normal; font-weight: bold; color: #111; }
#cards .b { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; }
#cards button { display: flex; align-items: baseline; gap: 5px; padding: 1px 0; color: #111; font-size: 13px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.05em; }
#cards button::before { background: none; filter: none; }
#cards button:hover { text-decoration: underline; }
#cards .y { padding: 0 4px; font-size: 10px; border: 1px solid #111; line-height: 14px; }
#cards .pcard:not(.y1) .y { display: none; }
#cards .bar { height: 2px; margin-top: 6px; background: rgba(17, 17, 17, 0.15); }
#cards .left { height: 100%; width: 100%; background: #111; }
#ammo { position: absolute; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 12px; text-align: right; }
#ammo img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 2px 3px #000) saturate(0.85); }
#ammo .r { font-size: 30px; font-weight: bold; line-height: 1; }
#ammo .s { font-size: 13px; color: var(--dim); font-variant: small-caps; letter-spacing: 0.06em; }
#speedo { position: absolute; left: 50%; bottom: 168px; transform: translateX(-50%); font-size: 22px; font-weight: bold; text-align: center; }
#speedo .s { font-size: 12px; font-weight: normal; color: var(--dim); font-variant: small-caps; letter-spacing: 0.05em; }
#hurt { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 42%, rgba(140, 14, 8, 0.78)); transition: opacity 0.5s; }
#downed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at center, rgba(60, 0, 0, 0.2), rgba(26, 0, 0, 0.88)); }
#downed .h { font-size: 46px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.12em; }
#downed .h::after { content: ''; display: block; width: 260px; height: 3px; margin: 8px auto 12px; background: var(--red); filter: url(#brushLine); }
#downed .s { color: var(--ink); opacity: 0.85; max-width: 480px; }
#downed.dead { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.96)); }
/* the controls (F1) */
#helpHint { position: absolute; right: 22px; bottom: 6px; font-size: 11px; color: var(--dim); font-variant: small-caps; letter-spacing: 0.08em; opacity: 0.7; }
#help { position: absolute; top: 50%; right: 26px; transform: translateY(-50%); padding: 18px 24px; font-size: 13px; text-shadow: none; width: 360px; }
#help h3 { text-align: center; font-size: 18px; margin: 0; }
#help .rows { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; align-items: center; }
#help .rows > span:nth-child(odd of :not(.sub)) { text-align: right; white-space: nowrap; }
#help .sub { grid-column: 1 / -1; margin-top: 6px; color: var(--dim); font-weight: bold; font-variant: small-caps; letter-spacing: 0.12em; }

/* the map */
#wmap { position: fixed; inset: 0; z-index: 14; background: #2a231b; }
#wmapC { width: 100%; height: 100%; cursor: crosshair; }
/* the general's map (General.js): its panel, our parties and the orders for those picked; and in the world, the word on an order waiting for its place */
#genPanel { position: absolute; top: 16px; right: 16px; width: 300px; max-height: calc(100vh - 100px); overflow: auto; padding: 12px 14px; font-size: 13px; color: var(--ink); }
#genPanel .h { font-weight: bold; font-variant: small-caps; letter-spacing: 0.06em; font-size: 17px; }
#genPanel .sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
#genPanel .rows { display: flex; flex-direction: column; gap: 1px; }
#genPanel .pr { display: grid; grid-template-columns: 26px 1fr auto; column-gap: 6px; align-items: center; padding: 3px 5px; cursor: pointer; user-select: none; }
#genPanel .pr:hover { background: rgba(242, 237, 227, 0.08); }
#genPanel .pr.on { background: rgba(212, 160, 23, 0.24); }
#genPanel .pr .n { font-variant-numeric: tabular-nums; color: var(--dim); }
#genPanel .pr .o { grid-column: 2 / 4; font-size: 11px; color: var(--dim); font-style: italic; }
#genPanel .none, #genPanel .help { font-size: 12px; color: var(--dim); margin-top: 6px; }
#genPanel .ords { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
#genPanel .ords button, #genPanel > button { font-size: 13px; padding: 4px 9px; }
#genPanel .aim { margin: 6px 0 2px; color: #e8c15a; font-size: 12px; }
#genPanel .sym { position: relative; width: 22px; height: 14px; border: 1.5px solid #a9c1d8; --g: #a9c1d8; }
#genPanel .s-infantry, #genPanel .s-mg { background: linear-gradient(to top right, transparent calc(50% - 0.8px), var(--g) 50%, transparent calc(50% + 0.8px)), linear-gradient(to bottom right, transparent calc(50% - 0.8px), var(--g) 50%, transparent calc(50% + 0.8px)); }
#genPanel .s-mg::after { content: ''; position: absolute; left: 50%; top: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--g); }
#genPanel .s-cavalry { background: linear-gradient(to top right, transparent calc(50% - 0.8px), var(--g) 50%, transparent calc(50% + 0.8px)); }
#genPanel .s-artillery { background: radial-gradient(circle, var(--g) 2.6px, transparent 3.2px); }
#genPanel .s-tank::after { content: ''; position: absolute; inset: 2px 3px; border: 1.5px solid var(--g); border-radius: 50%; }
#genPanel .s-medical { background: linear-gradient(var(--g), var(--g)) center / 12px 1.5px no-repeat, linear-gradient(var(--g), var(--g)) center / 1.5px 10px no-repeat; }
#genPanel .s-engineers::after { content: ''; position: absolute; left: 5px; right: 5px; top: 3px; bottom: 2px; border: 1.5px solid var(--g); border-bottom: 0; background: linear-gradient(var(--g), var(--g)) center / 1.5px 100% no-repeat; }
#genPanel .s-recce::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -4.5px 0 0 -4.5px; border: 1.5px solid var(--g); border-radius: 50%; }
#orderAim { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); padding: 5px 16px; font-size: 14px; font-weight: bold; color: #e8c15a; background: rgba(12, 11, 10, 0.72); white-space: nowrap; }
#wmapNote { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 6px 18px; font-size: 13px; color: var(--ink); white-space: nowrap; }

/* chat */
#chat { position: fixed; left: 16px; bottom: 16px; width: min(540px, calc(100vw - 28px)); z-index: 12; }
#chatLog { max-height: 34vh; overflow-y: auto; padding: 6px 10px; font-size: 14px; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px); mask-image: linear-gradient(to bottom, transparent, #000 18px); }
#chat.open #chatLog { background: linear-gradient(90deg, rgba(8, 7, 6, 0.75), rgba(8, 7, 6, 0.35)); pointer-events: auto; }
#chatLog .l { margin: 1px 0; opacity: 1; transition: opacity 1s; overflow-wrap: anywhere; }
#chatLog .l.old { opacity: 0; }
#chat.open #chatLog .l.old { opacity: 1; }
.k-system { color: var(--dim); font-style: italic; } .k-announce { color: var(--gold); font-weight: bold; }
.k-report { color: var(--gold); } .k-warning { color: var(--bad, #c55); font-weight: bold; }
.k-me { color: var(--me); } .k-do { color: var(--do); } .k-ooc, .k-looc { color: var(--ooc); } .k-pm, .k-pmSent { color: var(--pm); }
.k-shout { font-weight: bold; } .k-whisper { color: #cfc6b2; font-style: italic; }
#chatIn { display: none; margin-top: 4px; background: rgba(8, 7, 6, 0.85); }
#chat.open #chatIn { display: block; }

/* ---------------------------------------------------------------- the satchel (Tab), and what's open beside it */
#inv { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 14; display: flex; gap: 22px; align-items: flex-start; user-select: none; }
#inv .pane { padding: 16px 20px 14px; width: 444px; }
#inv .ph { display: flex; align-items: center; justify-content: center; position: relative; min-height: 34px; }
#inv .ph h3 { margin: 0; font-size: 25px; letter-spacing: 0.1em; }
#inv .ph .ico { position: absolute; left: 0; width: 28px; height: 28px; opacity: 0.9; }
#inv .ph .who { position: absolute; right: 0; font-size: 12px; color: var(--dim); font-weight: bold; font-variant: small-caps; letter-spacing: 0.06em; max-width: 120px; text-align: right; line-height: 1.1; }
#inv .bar3 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.06em; font-size: 14px; }
#inv .bar3 > :last-child { justify-self: end; }
#inv .parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 4px 0 2px; }
#inv .parts button.on { text-decoration: underline; }
#inv .bar3 input { width: 130px; padding: 3px 6px; font-size: 13px; background: transparent; }
#invWt.over { color: #ff6a5c; }
#invSkills { padding: 6px 4px; display: grid; gap: 7px; font-size: 13px; }
#invSkills .sk { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; }
#invSkills .sk b { font-variant: small-caps; letter-spacing: 0.05em; font-size: 15px; }
#invSkills .sk .bar { grid-column: 1 / 3; height: 5px; background: rgba(242, 237, 227, 0.18); }
#invSkills .sk .bar i { display: block; height: 100%; background: #c9a24a; }
#invSkills .sk .nt { grid-column: 1 / 3; color: var(--dim); font-size: 12px; }
#invSkills .wk { color: var(--dim); font-size: 12px; font-style: italic; }
#inv .tabs { display: flex; justify-content: center; gap: 6px; margin: 2px 0 10px; }
#inv .tabs button { width: 34px; height: 34px; padding: 0; opacity: 0.45; }
#inv .tabs button::before { background: none; }
#inv .tabs button img { width: 30px; height: 30px; display: block; margin: 2px; }
#inv .tabs button:hover, #inv .tabs button.on { opacity: 1; }
#inv .tabs button.on { filter: drop-shadow(0 0 4px rgba(242, 237, 227, 0.5)); }
#inv .grid { display: grid; grid-template-columns: repeat(5, 76px); gap: 6px; justify-content: center; }
.sl { width: 76px; height: 76px; position: relative; background: var(--slot); box-shadow: inset 0 0 0 1px rgba(242, 237, 227, 0.07), inset 0 0 14px rgba(0, 0, 0, 0.6); cursor: default; transition: opacity 0.15s; }
.sl.full { background: linear-gradient(160deg, #5a5652, #3a3835); cursor: grab; }
.sl img { position: absolute; inset: 6px; width: 64px; height: 64px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.65)) saturate(0.85) sepia(0.08); }
.sl .k { position: absolute; left: 4px; top: 1px; color: var(--dim); font: bold 11px/1.3 var(--serif); z-index: 1; text-shadow: 0 1px 2px #000; }
.sl.full:hover, .sl.sel { box-shadow: inset 0 0 0 2px var(--ink); }
.sl.held { box-shadow: inset 0 0 0 2px var(--gold); }
.sl.over { box-shadow: inset 0 0 0 2px var(--ink); background: #6b6762; }
.sl.dim { opacity: 0.22; }
.sl .nm { position: absolute; left: 3px; right: 3px; top: 26px; font-size: 10px; line-height: 1.1; text-align: center; color: var(--ink); text-shadow: 0 1px 2px #000; }
#inv .notch { width: 0; height: 0; margin: 12px auto 0; border: 9px solid transparent; border-bottom-color: rgba(242, 237, 227, 0.55); border-top: 0; }
#invInfo { border-top: 2px solid rgba(242, 237, 227, 0.55); padding: 10px 6px 4px; min-height: 92px; font-size: 13px; }
#invInfo .nm { font-size: 17px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.05em; }
#invInfo .nt { color: var(--dim); font-style: italic; }
#invInfo .st { margin-top: 4px; font-size: 12px; color: var(--dim); font-variant: small-caps; letter-spacing: 0.06em; }
#inv .foot { display: flex; align-items: center; gap: 8px; font-weight: bold; font-size: 15px; padding: 0 4px; }
#inv .foot .sp { flex: 1; }
#inv .foot #invWho { font-size: 13px; color: var(--dim); font-variant: small-caps; letter-spacing: 0.08em; }
#invHelp { font-size: 11px; color: var(--dim); margin-top: 8px; text-align: center; line-height: 1.5; }
#invGhost { position: fixed; z-index: 30; pointer-events: none; opacity: 0.9; }
/* what a slot can do: a slip of white paper beside it */
#invMenu { position: fixed; z-index: 31; min-width: 112px; padding: 4px 0; background: var(--ink); color: #111; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7); }
#invMenu button { display: block; width: 100%; text-align: left; color: #111; font-size: 13px; padding: 4px 14px; }
#invMenu button::before { background: none; filter: none; }
#invMenu button:hover:not(:disabled) { color: var(--ink); }
#invMenu button:hover:not(:disabled)::before { background: #111; }
#invMenu::after { content: ''; position: absolute; left: -7px; top: 12px; border: 7px solid transparent; border-left: 0; border-right-color: var(--ink); }
#invMenu.left::after { left: auto; right: -7px; border-right: 0; border-left: 7px solid var(--ink); }
#arrival { position: absolute; top: 16%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity 1.4s; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
#arrival.on { opacity: 1; }
#arrival .n { font-size: 44px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.1em; line-height: 1.1; white-space: nowrap; }
#arrival .brule { width: 60%; margin: 6px auto; }
#arrival .s { font-size: 15px; color: var(--ink); opacity: 0.85; font-variant: small-caps; letter-spacing: 0.08em; }
/* a city's district, the country's lands: smaller than a place's name */
#arrival.minor .n { font-size: 32px; }
#arrival.minor .brule { width: 40%; }

/* a desk line's sparkline (Desk.js): how a price has gone */
#desk .dsp { display: block; width: 100%; max-width: 240px; height: 20px; margin-top: 3px; }
#desk .dsp polyline { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
#desk .dsp.up polyline { stroke: #7fb87a; }
#desk .dsp.down polyline { stroke: #d0786a; }
/* the performance overlay (F3: PerfOverlay.js) */
#perf { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 30; padding: 6px 10px; background: rgba(12, 10, 8, 0.78); color: #e8dcc4; font: 12px/1.45 Consolas, monospace; border-radius: 4px; pointer-events: none; white-space: nowrap; }