/* Retro workstation theme (NeXTSTEP / CDE flavour): hard bevels, dark title bars.
   Every colour is a variable; the server's world palette overwrites them at run time (see ui.applyTheme),
   so the values below are only the "default" look used before the palette arrives. */
:root {
  --face: #aeaeae;
  --face-dark: #9a9a9a;
  --hi: #ffffff;
  --lo: #5a5a5a;
  --border: #000000;
  --text: #000000;
  --dim: #3c3c3c;
  --title-a: #3c3c3c;
  --title-b: #181818;
  --title-text: #ffffff;
  --field: #f4f4ee;
  --field-text: #000000;
  --tabbody: #bcbcbc;
  --thumb: #2d4a2a;
  --accent: #e0b43e;
  --gold: #e0b43e;
  --hp: #c0392b;
  --sea: #1d4f86;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sea); font-family: var(--font); font-size: 12px; color: var(--text); -webkit-user-select: none; user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }

/* ---- windows ---- */
.win {
  position: absolute; pointer-events: auto; background: var(--face); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 4px 4px 0 rgba(0, 0, 0, 0.45);
}
.win.hidden, .hidden { display: none !important; }
.title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: linear-gradient(var(--title-a), var(--title-b)); color: var(--title-text); font-weight: 700;
  padding: 3px 4px 3px 9px; cursor: move; border-bottom: 1px solid var(--border); letter-spacing: 0.2px;
}
.wbtn {
  width: 16px; height: 16px; padding: 0; line-height: 12px; font: 700 13px var(--font); color: var(--text); background: var(--face); cursor: pointer;
  border: 1px solid var(--border); box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
}
.wbtn:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.body { padding: 8px; }

/* ---- controls ---- */
.btn, .dockbtn, .tab {
  font: inherit; color: var(--text); background: var(--face); cursor: pointer;
  border: 1px solid var(--border); padding: 3px 10px;
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
}
.btn:active:not(:disabled), .dockbtn:active, .tab.on {
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); background: var(--face-dark);
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.small { padding: 1px 6px; font-size: 11px; }
.field {
  font: inherit; width: 100%; background: var(--field); border: 1px solid var(--border); padding: 3px 5px; color: var(--field-text);
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); -webkit-user-select: text; user-select: text;
}
.link { font: 700 12px var(--font); background: none; border: 0; padding: 0; cursor: text; text-decoration: underline dotted; color: var(--text); }
.check { display: flex; align-items: center; gap: 5px; margin-top: 6px; cursor: pointer; }
.dim { color: var(--dim); }
.coin { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a0, var(--gold) 55%, #8a6a00); border: 1px solid #5a4400; margin-right: 4px; vertical-align: -1px; }

.row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.row .lbl { width: 66px; color: var(--text); }
.row.end { justify-content: flex-end; }
.right { margin-left: auto; }
.sep { height: 2px; margin: 8px 0; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); }

.meter { position: relative; height: 17px; margin: 6px 0; background: #1d1d1d; border: 1px solid var(--border); box-shadow: 1px 1px 0 var(--hi); }
.meter .fill { height: 100%; width: 100%; background: linear-gradient(var(--hp), color-mix(in srgb, var(--hp) 65%, #000)); transition: width 0.1s linear; }
.meter .mtext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; text-shadow: 1px 1px 0 #000; }
.zone { margin-top: 4px; padding: 2px 6px; font-weight: 700; text-align: center; color: var(--title-text); background: linear-gradient(var(--title-a), var(--title-b)); border: 1px solid var(--border); }

/* ---- dock ---- */
#dock { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; pointer-events: auto; padding: 6px; background: var(--face); border: 1px solid var(--border); box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 4px 4px 0 rgba(0,0,0,.45); }
.dockbtn { min-width: 52px; padding: 7px 8px; font-weight: 700; }

/* ---- minimap ---- */
.mapcanvas { display: block; width: 166px; height: 166px; background: var(--sea); border: 1px solid var(--border); box-shadow: 1px 1px 0 var(--hi); image-rendering: auto; }

/* ---- chat ---- */
.chatlog { height: 128px; overflow-y: auto; padding: 4px 6px; margin-bottom: 6px; background: var(--field); color: var(--field-text); border: 1px solid var(--border); box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); -webkit-user-select: text; user-select: text; font-size: 12px; line-height: 1.35; }
.cl.sys { opacity: 0.7; }
.cl.band { color: var(--accent); filter: brightness(0.7); }
.cl.npc { font-style: italic; }
.cl.npc b { color: #9a5a10; font-style: normal; }

/* ---- shop / bar / bands ---- */
.tabs { display: flex; gap: 0; margin: 8px 0 0; }
.tab { padding: 4px 14px; margin-right: -1px; }
.tabbody { border: 1px solid var(--border); padding: 8px; background: var(--tabbody); box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo); min-height: 150px; }
.shoprow { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--lo); }
.shoprow .si { flex: 1; }
.price { min-width: 52px; text-align: right; font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 6px; }
.card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; background: var(--face); border: 1px solid var(--border); box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo); }
.card.on { outline: 2px solid var(--gold); }
.thumb { width: 72px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--thumb); border: 1px solid var(--border); box-shadow: inset 1px 1px 0 #000; }
.thumb img { max-width: 64px; max-height: 52px; object-fit: contain; }
.cname { font-weight: 700; text-align: center; }
.members { margin: 4px 0 8px; padding-left: 18px; }
.bandhead { border-left: 5px solid; padding: 2px 8px; margin-bottom: 6px; font-size: 14px; }

/* ---- settings ---- */
.setrow { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.setrow .lbl { width: 92px; }
.setrow input[type=range] { flex: 1; accent-color: var(--accent); cursor: pointer; }
.setrow .val { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.opt { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; cursor: pointer; }
.opt small { display: block; color: var(--dim); }
.setsec { margin: 10px 0 2px; font-weight: 700; }

/* ---- help ---- */
table.keys { border-collapse: collapse; width: 100%; margin: 6px 0; }
table.keys td { padding: 3px 4px; border-bottom: 1px solid var(--lo); vertical-align: top; }
table.keys td.k { font-weight: 700; white-space: nowrap; width: 150px; }

/* ---- chat timestamps ---- */
.chatlog .ts { display: none; opacity: .6; font-variant-numeric: tabular-nums; }
.chatlog.showts .ts { display: inline; }
.cl.hist { text-align: center; font-size: 11px; margin: 3px 0; }
.clock { font-variant-numeric: tabular-nums; }

/* ---- player list ---- */
#win-players .whohead { font-weight: 700; margin-bottom: 6px; }
#win-players .field { box-sizing: border-box; margin-bottom: 6px; }
#win-players .field.hidden { display: none; }
#win-players .wholist { max-height: 300px; overflow-y: auto; border: 1px solid var(--lo); background: var(--field); color: var(--field-text); }
#win-players .prow { display: flex; justify-content: space-between; gap: 8px; padding: 3px 8px; border-bottom: 1px solid color-mix(in srgb, var(--lo) 40%, transparent); }
#win-players .prow.me { background: color-mix(in srgb, var(--accent) 22%, transparent); }
#win-players .pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#win-players .pl { white-space: nowrap; font-size: 11px; align-self: center; }
#win-players .wholist p { margin: 8px; }

/* ---- help book ---- */
#win-help .body { padding: 0; }
.hbook { display: flex; height: 400px; max-height: calc(100vh - 120px); }
.hbside { width: 170px; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-right: 1px solid var(--lo); box-sizing: border-box; }
.hbside .field { box-sizing: border-box; }
.hbnav { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.hbitem { font: inherit; text-align: left; padding: 4px 8px; background: none; border: 1px solid transparent; color: var(--text); cursor: pointer; }
.hbitem:hover { border-color: var(--lo); }
.hbitem.on { background: var(--accent); color: #fff; }
.hbmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hbpage { flex: 1; overflow-y: auto; padding: 8px 14px; line-height: 1.4; }
.hbpage p { margin: 6px 0; }
.hbtitle { margin: 4px 0 8px; font-size: 16px; }
.hbsub { margin: 12px 0 2px; font-size: 13px; }
.hbtip { padding: 5px 8px; background: color-mix(in srgb, var(--accent) 16%, transparent); border-left: 4px solid var(--accent); }
.hbsee { margin-top: 14px; }
.hblink { font: inherit; font-weight: 700; background: none; border: 0; padding: 0; color: var(--text); text-decoration: underline; cursor: pointer; }
.hbcard { display: flex; flex-direction: column; width: 100%; text-align: left; font: inherit; padding: 6px 10px; margin: 0 0 6px; color: var(--text); background: var(--face); border: 1px solid var(--border); box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo); cursor: pointer; }
.hbcard:hover { outline: 2px solid var(--accent); }
.hbfoot { display: flex; justify-content: space-between; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--lo); }
#win-help table.keys td.k { width: 130px; }

/* ---- overlays ---- */
#toasts { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { padding: 5px 14px; background: var(--face); color: var(--text); border: 1px solid var(--border); box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 3px 3px 0 rgba(0,0,0,.4); font-weight: 700; transition: opacity 0.6s; }
.toast.bad { border-left: 6px solid #c0392b; }
.toast.ok { border-left: 6px solid #2f9a4a; }
.toast.fade { opacity: 0; }
#death { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(rgba(120,0,0,0.15), rgba(90,0,0,0.5)); pointer-events: none; }
.deathbox { position: relative; width: 320px; text-align: center; }
.deathbox .big { font-size: 22px; font-weight: 700; margin: 6px 0; }

#splash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--sea); z-index: 9999; color: #fff; }
#splash .win { position: relative; width: 300px; }
#splash.gone { display: none; }

/* ---- character creation / tailor ---- */
#creator { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background: var(--sea); overflow: auto; }
.creatorwin { position: relative; width: min(640px, 96vw); }
.creator { display: flex; gap: 16px; flex-wrap: wrap; }
.cleft { width: 240px; }
.cright { flex: 1; min-width: 240px; }
.preview { display: block; width: 240px; height: 290px; background: var(--thumb); border: 1px solid var(--border); box-shadow: inset 1px 1px 0 #000, 1px 1px 0 var(--hi); image-rendering: auto; }
.preview.small { width: 150px; height: 182px; }
.swrow { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
.sw { width: 24px; height: 24px; padding: 0; cursor: pointer; border: 1px solid var(--border); box-shadow: inset 1px 1px 0 rgba(255,255,255,.45), inset -1px -1px 0 rgba(0,0,0,.35); }
.sw.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.chrow { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
.btn.on { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); background: var(--face-dark); font-weight: 700; }
.btn.primary { font-weight: 700; padding: 5px 16px; }
.tailorwrap { display: flex; gap: 12px; }
.tailorctl { flex: 1; min-width: 0; }

/* ---- pack ---- */
.wpn { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--lo); }
.wpn .si { flex: 1; }
.bladechip { display: inline-block; width: 26px; height: 6px; border: 1px solid #000; vertical-align: middle; margin-right: 6px; }
.stance { font-weight: 700; }

/* ---- voyage ---- */
#voyage { position: fixed; inset: 0; z-index: 9997; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--sea) 88%, #000); }
#voyage .win { position: relative; width: 320px; text-align: center; }
#voyage .big { font-size: 18px; font-weight: 700; margin: 8px 0 10px; }
.waves { height: 26px; background: repeating-linear-gradient(100deg, transparent 0 14px, rgba(255,255,255,.35) 14px 16px, transparent 16px 30px); animation: wave 1.2s linear infinite; opacity: .8; }
@keyframes wave { from { background-position: 0 0; } to { background-position: 30px 0; } }

/* pack: supplies and gold rows */
.supply { gap: 6px; }
.supply .right { display: flex; gap: 4px; align-items: center; }
.field.amt { width: 64px; padding: 2px 4px; }
#pack .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#win-pack .body { max-height: 78vh; overflow-y: auto; }
#win-pack .tabbody { min-height: 0; }
#win-pack .wpnlist { max-height: 150px; overflow-y: auto; overscroll-behavior: contain; }   /* about two and a half rows: the half row says 'scroll' */
.wpn.on { background: rgba(255,255,255,.35); }
.wpn.on .si b::after { content: ' (in hand)'; font-weight: normal; opacity: .65; }

/* ---- graffiti wall window: monospace so ASCII art lines up */
.wall-text { display: block; box-sizing: content-box; margin: 0 auto; padding: 6px 8px; font: 15px/1.25 "Courier New", Courier, ui-monospace, monospace; background: #17130f; color: #f6edcf; border: 2px inset #6b5a3c; resize: none; overflow: hidden; white-space: pre; tab-size: 2; }
.wall-text[readonly] { opacity: 0.92; cursor: default; }
.wall-ruler { margin: 4px auto 0; width: max-content; padding: 0 9px; font: 15px/1.1 "Courier New", Courier, ui-monospace, monospace; color: #8a7a58; white-space: pre; }
.wall-info { margin-bottom: 4px; }

/* boss health bar */
#bossbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(460px, 70vw); text-align: center; pointer-events: none; z-index: 5; }
#bossbar.hidden { display: none; }
#bossbar .bname { font-weight: 700; letter-spacing: .08em; color: #ffe3c2; text-shadow: 0 2px 4px #000; margin-bottom: 4px; }
#bossbar .btrack { height: 14px; background: rgba(10,6,6,.75); border: 2px solid #e0b043; border-radius: 4px; overflow: hidden; }
#bossbar .bfill { height: 100%; width: 100%; background: linear-gradient(#e0443a, #8e1a14); transition: width .15s linear; }
#bossbar.enraged .bfill { background: linear-gradient(#ff7a2a, #c01e10); }
#bossbar.enraged .bname { color: #ff9a6a; }

/* conversations */
#win-talk .npcsay { margin: 4px 0 12px; line-height: 1.45; font-style: italic; min-height: 3.5em; }
#win-talk .answers { display: flex; flex-direction: column; gap: 6px; }
#win-talk .answer { text-align: left; }

/* quest log */
#win-quests .quest { padding: 6px 4px 8px; border-bottom: 1px solid var(--lo); }
#win-quests .quest .goal { margin-top: 3px; line-height: 1.4; font-style: italic; }
#win-quests .quest.done { opacity: .65; }
#dock button.pulse { animation: questpulse 0.8s ease-in-out 5; }
@keyframes questpulse { 50% { background: #ffe9a8; } }

/* emote palette (G) */
#win-emotes .field { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
#win-emotes .emotelist { max-height: 260px; overflow-y: auto; border: 1px solid var(--lo); background: var(--field); }
#win-emotes .ehead { padding: 3px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; background: var(--face-dark); }
#win-emotes .erow { display: flex; justify-content: space-between; padding: 4px 8px; cursor: pointer; color: var(--field-text); }
#win-emotes .erow .ec { opacity: .55; font-family: monospace; }
#win-emotes .erow.sel { background: var(--accent); color: #fff; }
#win-emotes .erow.no { opacity: .45; }
.tailorctl { max-height: 62vh; overflow-y: auto; padding-right: 4px; }

.panel .row b.alert { color: #ff8a7a; }
.btn.on { background: var(--hi, #fff); font-weight: bold; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }

/* ---- Saltmarket services (public/js/panels.js) */
.svcblock { padding: 6px 2px 8px; border-bottom: 1px solid var(--lo); }
.svcblock:last-child { border-bottom: 0; }
.svch { font-weight: 700; margin: 2px 0 6px; }
.svch.hot, .svcbig.hot { color: #d6392b; }
.svcbig { font-size: 20px; font-weight: 700; text-align: center; margin: 8px 0; }
.svcbig.hot { animation: svcpulse 0.5s ease-in-out infinite alternate; }
@keyframes svcpulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.svctext { margin: 2px 0 6px; line-height: 1.35; }
.svctimer { text-align: center; margin: 4px 0; }
.svctimer .tmv { font-size: 18px; }
.svcbtns { justify-content: center; margin-top: 6px; }
.svcform { gap: 6px; margin-top: 6px; }
.shoprow.warnrow { background: rgba(214, 57, 43, 0.12); }
.shoprow .tag { font-size: 11px; }
.btn.warn { color: #a3261c; }
.btn.small.primary { padding: 3px 12px; }

/* knucklebones */
.dboard{border:1px solid var(--border, #000);padding:4px 6px;margin:4px 0;background:rgba(0,0,0,.08)}
.dboard.dturn{outline:2px solid var(--accent, #c9a227)}
.dname{display:flex;gap:6px}.dname .right{margin-left:auto}
.dcols{display:flex;gap:8px;justify-content:center;margin-top:4px}
.dcol{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px}
.die{width:30px;height:30px;line-height:30px;text-align:center;font-weight:bold;font-size:16px;background:#f4efe4;color:#1a1410;border:1px solid #1a1410;border-radius:4px}
.dsum{font-size:11px;opacity:.75}
.svcform{flex-wrap:wrap}

#perf { position: fixed; top: 4px; left: 50%; transform: translateX(-50%); z-index: 50; padding: 2px 6px; font: 11px monospace; color: #cfe; background: rgba(0,0,0,.55); border-radius: 3px; pointer-events: none; display: none; }