:root {
  --gold: #ffd100;
  --gold-dim: #b8952a;
  --panel: rgba(12, 10, 18, 0.82);
  --panel-edge: #6b5424;
  --text: #f2ead8;
  --muted: #a89f8a;
  --hp: #2fbf3a;
  --hp-dark: #145a19;
  --mana: #2a6fe0;
  --mana-dark: #0f2c63;
  --serif: 'Cinzel', Georgia, 'Times New Roman', serif;
  --sans: 'Alegreya Sans', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0a0a10;
  color: var(--text);
  font-family: var(--sans);
  user-select: none;
  -webkit-user-select: none;
}
#game canvas { display: block; }
body.hover-enemy #game canvas { cursor: crosshair; }
body.hover-npc #game canvas { cursor: help; }
body.hover-loot #game canvas { cursor: pointer; }
body.targeting #game canvas { cursor: cell; }
body.dead #game canvas { filter: grayscale(1) brightness(0.8); }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.btn {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: linear-gradient(#5a1a12, #2e0a06);
  border: 1px solid #a0782a;
  border-radius: 4px;
  padding: 8px 18px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.25), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.btn:hover { filter: brightness(1.25); }
.btn.primary { background: linear-gradient(#8a2a14, #4a0e06); }
.btn.big { font-size: 18px; padding: 12px 28px; width: 100%; }

.panel {
  position: absolute;
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
  box-shadow: 0 0 0 1px #000, 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

/* ---------------------------------------------------------------- Loading and login */
#loading, #login {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
#loading { background: radial-gradient(circle at 50% 40%, #2a1e40, #06050a); }
#loading .msg { margin-top: 18px; color: var(--muted); font-size: 18px; }
.logo {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 64px;
  letter-spacing: 0.06em;
  background: linear-gradient(#fff4c0, #ffcf4a 45%, #b0701a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 #2a1402) drop-shadow(0 0 24px rgba(255, 170, 60, 0.35));
}
#login { background: radial-gradient(ellipse at 50% 60%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 70%); }
.login-card {
  width: min(380px, calc(100vw - 32px));
  padding: 28px 28px 20px;
  text-align: center;
  background: rgba(10, 8, 16, 0.78);
  border: 2px solid var(--panel-edge);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.login-card .logo { font-size: 40px; letter-spacing: 0.03em; }
.logo-sub { font-family: var(--serif); color: var(--gold-dim); letter-spacing: 0.5em; margin: -6px 0 10px; font-size: 13px; }
.login-desc { color: var(--muted); margin-bottom: 18px; font-size: 16px; }
.login-card label { display: block; text-align: left; font-family: var(--serif); color: var(--gold); font-size: 12px; letter-spacing: 0.1em; margin: 12px 0 6px; }
#name {
  width: 100%;
  padding: 10px 12px;
  font-size: 18px;
  font-family: var(--sans);
  color: var(--text);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #5a4a2a;
  border-radius: 4px;
  outline: none;
}
#name:focus { border-color: var(--gold); }
#swatches { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 20px; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #222; cursor: pointer; box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.4); }
.swatch.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 209, 0, 0.7), inset 0 -4px 8px rgba(0, 0, 0, 0.4); }
#watch-intro { width: 100%; margin-top: 10px; }
.login-films { display: flex; gap: 8px; margin-top: 10px; }
.login-films .btn { flex: 1; width: auto; margin-top: 0; padding-left: 6px; padding-right: 6px; }
.login-foot { margin-top: 14px; color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- HUD layout */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud .panel, #hud button, #hud input, #action-bar, #death, #banner { pointer-events: auto; }

.unit-frame {
  position: absolute;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 0;
}
#player-frame { left: 14px; }
#party-frames { position: absolute; left: 20px; top: 96px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.pmember { display: flex; align-items: center; }
.pm-portrait { position: relative; width: 40px; height: 40px; flex: none; z-index: 2; }
.pm-portrait canvas { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #3a8cff; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.6); display: block; }
.pm-lvl { position: absolute; bottom: -4px; left: -4px; width: 18px; height: 18px; border-radius: 50%; background: #1a1410; border: 1px solid #3a8cff; font: 700 10px var(--serif); color: #cfe0ff; display: flex; align-items: center; justify-content: center; }
.pm-body { width: 140px; margin-left: -8px; padding: 4px 8px 4px 14px; background: rgba(10, 12, 20, 0.72); border: 1px solid rgba(58, 140, 255, 0.45); border-radius: 0 5px 5px 0; }
.pm-name { font: 700 12px var(--serif); color: #9fc4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; text-shadow: 0 1px 2px #000; }
.pm-lead { color: #ffd100; }
.pm-hp { height: 10px; }
.pm-hp .txt { font-size: 9px; }
.pmember.far { opacity: 0.55; }
.pmember.dead .pm-portrait canvas { filter: grayscale(1); }
.plate.party .pname { color: #6ab4ff !important; }
#target-frame { left: 330px; }
.portrait-wrap { position: relative; width: 64px; height: 64px; flex: none; z-index: 2; }
.portrait-wrap canvas, .t-portrait {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #8a6a2a;
  box-shadow: 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, 0.6);
  display: block;
}
.t-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 30px;
  color: #ffd9c0;
  background: radial-gradient(circle at 50% 35%, #6a2a1a, #1a0806);
}
#target-frame.friendly .t-portrait { background: radial-gradient(circle at 50% 35%, #2a4a6a, #081420); color: #d0e8ff; }
#target-frame.elite .t-portrait { border-color: var(--gold); box-shadow: 0 0 0 1px #000, 0 0 14px rgba(255, 209, 0, 0.8); }
#target-frame.dead .t-portrait { filter: grayscale(1); }
.lvl-badge {
  position: absolute;
  bottom: -4px;
  left: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1a1410;
  border: 2px solid #8a6a2a;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 12px;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
#target-frame .lvl-badge { left: auto; right: -4px; }
.uf-body {
  width: 200px;
  padding: 5px 8px 6px 14px;
  margin-left: -10px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 0 6px 6px 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
#target-frame .uf-body { margin-left: 0; margin-right: -10px; padding: 5px 14px 6px 8px; border-radius: 6px 0 0 6px; }
.uf-name { font-family: var(--serif); font-weight: 700; font-size: 13px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; text-shadow: 0 1px 2px #000; }
#player-frame.combat .uf-name { color: #ff6a50; }
.bar {
  position: relative;
  height: 15px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #000;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.bar .fill { position: absolute; inset: 0 auto 0 0; transition: width 0.15s linear; }
.bar.hp .fill { background: linear-gradient(#5fe066, var(--hp) 45%, var(--hp-dark)); }
.bar.mana { height: 12px; }
.bar.mana .fill { background: linear-gradient(#6aa8ff, var(--mana) 45%, var(--mana-dark)); }
#target-frame .bar.hp .fill { background: linear-gradient(#ff7a6a, #d0281a 45%, #6a0c06); }
#target-frame.friendly .bar.hp .fill { background: linear-gradient(#5fe066, var(--hp) 45%, var(--hp-dark)); }
.bar .absorb { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(45deg, rgba(220, 245, 255, 0.55) 0 4px, rgba(160, 220, 255, 0.3) 4px 8px); transition: width 0.15s linear; }
.bar .txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.auras { position: absolute; top: 72px; left: 70px; display: flex; gap: 4px; flex-wrap: wrap; width: 240px; }
#target-frame .auras { left: 0; }
.aura {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  border: 1px solid #000;
  background-size: cover;
  position: relative;
  box-shadow: 0 0 0 1px #6b5424;
  pointer-events: auto;
}
.aura.debuff { box-shadow: 0 0 0 1px #c02020; }
.aura span { position: absolute; bottom: -12px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; color: #ffe; text-shadow: 0 1px 2px #000; }

/* ---------------------------------------------------------------- Minimap and tracker */
#minimap-wrap { position: absolute; top: 10px; right: 14px; text-align: center; }
#zone-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  color: var(--gold);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  padding: 3px 12px;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px #000;
  display: inline-block;
}
#minimap { display: block; border-radius: 50%; border: 3px solid #8a6a2a; box-shadow: 0 0 0 2px #000, 0 6px 16px rgba(0, 0, 0, 0.6); background: #000; }
#realm { font-size: 11px; color: var(--muted); margin-top: 4px; text-shadow: 0 1px 2px #000; }
/* the time of day: a little sky on the minimap's rim, the sun or moon crossing it */
#clock { position: absolute; left: -16px; top: 52px; display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
#clock-dial { width: 40px; height: 40px; image-rendering: pixelated; border-radius: 50%; box-shadow: 0 0 0 2px #1e1406, 0 0 0 4px #f0cc6a, 0 0 0 6px #5e3e10, 0 0 0 7px #000; }
#clock-text { margin-top: 7px; font-family: var(--sans); font-size: 13px; color: #f4e6c4; white-space: nowrap; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000; }
#quest-tracker { position: absolute; top: 236px; right: 16px; width: 250px; text-align: right; text-shadow: 0 1px 2px #000, 0 0 4px #000; overflow: hidden; }
.qt-head { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 14px; margin-bottom: 4px; }
.qt-q { margin-bottom: 10px; }
.qt-title { color: #ffd100; font-weight: 700; font-size: 15px; }
.qt-title span { color: #40ff40; font-weight: 500; }
.qt-q.complete .qt-title { color: #7aff5a; }
.qt-more { color: #c8b890; font-size: 14px; }
.qt-line { color: #eee; font-size: 14px; }
.qt-line.done { color: #888; }
.qt-hint { color: #bfb49a; font-size: 12px; font-style: italic; }
.qd-group { color: #ff9a3a; font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px; }
.qd-group-note { color: #ffb060; border-left: 3px solid #ff9a3a; padding: 4px 8px; background: rgba(255, 154, 58, 0.08); }

/* ---------------------------------------------------------------- Messages */
#error-text, #msg-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-weight: 700;
  text-shadow: 0 2px 3px #000, 0 0 6px #000;
  white-space: nowrap;
  opacity: 0;
}
#error-text { top: 18%; color: #ff2a2a; font-size: 18px; }
#msg-text { top: 22%; color: var(--gold); font-size: 22px; }
.fade { animation: fadeMsg 2.2s ease-out forwards; }
@keyframes fadeMsg { 0% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } }
#hint { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); color: #ffe0a0; font-size: 16px; text-shadow: 0 1px 3px #000; background: rgba(0, 0, 0, 0.45); padding: 4px 12px; border-radius: 4px; }

#zone-text { position: absolute; top: 14%; width: 100%; text-align: center; opacity: 0; }
#zone-text .big { font-family: var(--serif); font-weight: 900; font-size: 48px; color: #ffd24a; text-shadow: 0 3px 0 #3a1a02, 0 0 20px rgba(0, 0, 0, 0.8); }
#zone-text .small { font-family: var(--serif); font-size: 20px; color: #f0e0b0; text-shadow: 0 2px 4px #000; }
#zone-text.show { animation: zoneIn 4.5s ease-in-out forwards; }
@keyframes zoneIn { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }

#levelup { position: absolute; top: 30%; width: 100%; text-align: center; opacity: 0; }
#levelup .lv { font-family: var(--serif); font-weight: 900; font-size: 56px; color: #fff2a0; text-shadow: 0 0 20px #ffb000, 0 3px 0 #5a3000; }
#levelup .learn { font-size: 20px; color: #ffe; text-shadow: 0 2px 4px #000; margin-top: 4px; }
#levelup.show { animation: levelIn 4s ease-out forwards; }
@keyframes levelIn { 0% { opacity: 0; transform: scale(0.6); } 10% { opacity: 1; transform: scale(1.1); } 18% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

#proc-alert { position: absolute; top: 34%; width: 100%; text-align: center; font-family: var(--serif); font-weight: 900; font-size: 34px; color: #ffe070; text-shadow: 0 0 18px #ff6a00, 0 3px 0 #5a1a00; opacity: 0; }
#proc-alert.show { animation: procIn 1.6s ease-out forwards; }
@keyframes procIn { 0% { opacity: 0; transform: scale(1.6); } 12% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
#proc-overlay .wing {
  position: absolute;
  top: 50%;
  width: 90px;
  height: 200px;
  margin-top: -130px;
  opacity: 0;
  transition: opacity 0.25s;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 220, 110, 0.9), rgba(255, 110, 20, 0.6) 35%, rgba(200, 30, 0, 0) 70%);
  filter: blur(2px);
  border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
}
#proc-overlay .wing.left { left: calc(50% - 220px); transform: rotate(-12deg); }
#proc-overlay .wing.right { left: calc(50% + 130px); transform: rotate(12deg); }
#proc-overlay.on .wing { opacity: 0.85; animation: flicker 0.6s ease-in-out infinite alternate; }
@keyframes flicker { from { filter: blur(2px) brightness(1); } to { filter: blur(3px) brightness(1.3); } }

#flash { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; }
#vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(200, 0, 0, 0.7) 100%); }

/* ---------------------------------------------------------------- Cast bar and action bar */
#cast-bar { position: absolute; bottom: 118px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; }
.cb-icon { width: 26px; height: 26px; background-size: cover; border: 1px solid #000; box-shadow: 0 0 0 1px #6b5424; }
.cb-bar { position: relative; width: 260px; height: 20px; background: rgba(0, 0, 0, 0.75); border: 1px solid #000; box-shadow: 0 0 0 1px #6b5424, 0 3px 8px rgba(0, 0, 0, 0.5); border-radius: 2px; overflow: hidden; }
.cb-bar .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ffe070, #e0a010 50%, #8a5a00); }
#cast-bar.channel .cb-bar .fill { background: linear-gradient(#a0ff90, #3ac03a 50%, #1a6a1a); }
.cb-bar .name { position: absolute; left: 8px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.cb-bar .time { position: absolute; right: 8px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; }

#bottom { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#action-bar {
  display: flex;
  gap: 5px;
  padding: 7px 9px;
  background: linear-gradient(rgba(30, 24, 18, 0.9), rgba(12, 10, 8, 0.92));
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
  box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, 0.6);
}
.slot {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 4px;
  border: 1px solid #000;
  box-shadow: 0 0 0 1px #5a4a2a, inset 0 0 6px #000;
  cursor: pointer;
  overflow: visible;
}
.slot .icon { position: absolute; inset: 0; background-size: cover; border-radius: 3px; }
.slot .cd { position: absolute; inset: 0; border-radius: 3px; }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 900; font-size: 20px; color: #ffe; text-shadow: 0 0 3px #000, 0 2px 2px #000; }
.slot .key { position: absolute; top: 2px; right: 4px; font-size: 12px; font-weight: 700; color: #eee; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.slot .lock { display: none; }
.slot:hover { box-shadow: 0 0 0 1px var(--gold), 0 0 8px rgba(255, 209, 0, 0.5); }
.slot.locked .icon { filter: grayscale(1) brightness(0.35); }
.slot.locked .lock { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #bbb; text-shadow: 0 1px 2px #000; }
.slot.nomana .icon { filter: saturate(0.4) brightness(0.55) sepia(1) hue-rotate(180deg); }
.slot.oor .key { color: #ff3030; }
.slot.active { box-shadow: 0 0 0 2px #fff4a0, 0 0 10px rgba(255, 240, 160, 0.8); }
.slot.proc { box-shadow: 0 0 0 2px #ffd100, 0 0 16px 4px rgba(255, 170, 0, 0.9); animation: procGlow 0.5s ease-in-out infinite alternate; }
@keyframes procGlow { from { box-shadow: 0 0 0 2px #ffd100, 0 0 10px 2px rgba(255, 170, 0, 0.7); } to { box-shadow: 0 0 0 2px #fff4a0, 0 0 22px 6px rgba(255, 120, 0, 1); } }
.slot.pressed .icon { animation: press 0.18s ease-out; }
@keyframes press { 0% { transform: scale(0.88); filter: brightness(1.6); } 100% { transform: scale(1); } }

#xp-bar { position: relative; width: 560px; max-width: 90vw; height: 12px; background: rgba(0, 0, 0, 0.75); border: 1px solid #000; box-shadow: 0 0 0 1px #4a3a5a; border-radius: 2px; overflow: hidden; }
#xp-bar .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#d09aff, #8a3adf 50%, #4a1a80); transition: width 0.3s; }
#xp-bar .txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px #000; }
/* (gold is shown in the bag now, not on the screen: the bottom right is the menu, menubar.js; October 2026, the user's) */
#money { display: none !important; position: absolute; bottom: 14px; right: 16px; font-weight: 700; color: #ffe08a; text-shadow: 0 1px 2px #000; background: var(--panel); border: 1px solid var(--panel-edge); padding: 3px 10px; border-radius: 12px; font-size: 13px; }

/* ---------------------------------------------------------------- Chat */
#chat { position: absolute; left: 14px; bottom: 14px; width: 400px; max-width: 40vw; }
#chat-log { max-height: 190px; overflow-y: auto; font-size: 14px; line-height: 1.3; text-shadow: 0 1px 2px #000, 0 0 3px #000; scrollbar-width: none; pointer-events: auto; }
#chat-log::-webkit-scrollbar { display: none; }
#chat-log .line { transition: opacity 1s; }
#chat-log .line.old { opacity: 0.35; }
#chat-log .sys { color: #ffe680; }
#chat-log .xp { color: #c89bff; }
#chat-log .loot { color: #7ad0ff; }
#chat-log .quest { color: #ffd100; }
#chat-log .level { color: #ffe070; font-weight: 700; }
#chat-log .say { color: #ffffff; }
#chat-log .yell { color: #ff4a3a; font-weight: 700; }
#chat-log .emote { color: #ff9a3a; }
#chat-log .error { color: #ff5a5a; }
#chat-log .whisper { color: #ff8ee8; }
#chat-log .party { color: #8ab8ff; }
.mod-bots { padding: 6px 14px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border-top: 1px solid rgba(107, 84, 36, 0.35); font-size: 13px; }
.mod-bots-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.mod-bots-state { font-weight: 700; }
.mod-bots-state.running { color: #6aff6a; }
.mod-bots-state.paused { color: #ffd100; }
.mod-bots-state.stopped { color: #ff6a5a; }
#chat-log .world { color: #ffc8a0; }
#chat-log .trade { color: #ffb070; }
#chat-tabs { display: flex; gap: 2px; margin-bottom: 3px; pointer-events: auto; }
#chat-tabs button { font: 12px var(--sans); color: #d8c89a; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(107, 84, 36, 0.6); border-bottom: 0; border-radius: 4px 4px 0 0; padding: 2px 9px; cursor: pointer; position: relative; }
#chat-tabs button.on { color: var(--gold); background: rgba(40, 30, 12, 0.85); border-color: var(--gold-dim); }
#chat-tabs button.unread::after { content: ''; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: #ffd100; }
#chat-log .guild { color: #5aff7a; }
#chat-input { width: 100%; margin-top: 6px; padding: 6px 8px; font-size: 14px; font-family: var(--sans); color: #fff; background: rgba(0, 0, 0, 0.7); border: 1px solid var(--gold-dim); border-radius: 3px; outline: none; }

/* ---------------------------------------------------------------- Windows */
#quest-dialog, #quest-log { left: 24px; top: 120px; width: 380px; max-height: calc(100vh - 360px); display: flex; flex-direction: column; }
#quest-log { left: 50%; transform: translateX(-50%); width: 480px; top: 12%; }
.qd-head { padding: 10px 14px 8px; border-bottom: 1px solid #4a3a1a; display: flex; align-items: baseline; gap: 10px; position: relative; }
.qd-name { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 17px; }
.qd-title { color: var(--muted); font-size: 13px; }
.x { position: absolute; right: 8px; top: 6px; background: none; border: none; color: #c9a44a; font-size: 22px; cursor: pointer; }
.qd-body { padding: 12px 16px; overflow-y: auto; font-size: 15px; line-height: 1.45; color: #efe4c8; background: linear-gradient(rgba(60, 44, 20, 0.25), rgba(0, 0, 0, 0)); }
.qd-body h3 { font-family: var(--serif); color: var(--gold); margin: 0 0 8px; font-size: 18px; }
.qd-body h4 { font-family: var(--serif); color: #e8c060; margin: 12px 0 4px; font-size: 14px; }
.qd-body p { margin: 0 0 10px; }
.qd-obj { margin: 0; padding-left: 18px; }
.reward { color: #fff2c0; }
.qd-foot { padding: 10px 14px; border-top: 1px solid #4a3a1a; display: flex; gap: 8px; justify-content: flex-end; }
.qd-quest { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: rgba(0, 0, 0, 0.3); border: 1px solid transparent; color: #ffe8a0; font-size: 15px; font-family: var(--sans); font-weight: 700; padding: 6px 8px; margin-top: 4px; border-radius: 4px; cursor: pointer; }
.qd-quest:hover { border-color: var(--gold-dim); background: rgba(255, 209, 0, 0.08); }
.qd-locked { display: flex; align-items: center; gap: 8px; color: #888; padding: 6px 8px; }
.qm { font-family: var(--serif); font-weight: 900; font-size: 18px; width: 16px; text-align: center; }
.qm.gold { color: var(--gold); text-shadow: 0 0 6px rgba(255, 209, 0, 0.6); }
.qm.grey { color: #999; }
.ql-q { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ql-q.done { opacity: 0.55; }
.ql-q ul { margin: 0 0 6px; padding-left: 18px; }
.ql-q li.ok { color: #7aff5a; }
.tag { font-family: var(--sans); font-size: 12px; padding: 1px 6px; border-radius: 8px; margin-left: 6px; vertical-align: middle; }
.tag.done { background: #333; color: #aaa; }
.tag.ready { background: #2a5a1a; color: #aaffa0; }
/* (the quest log's tabs, its tracking count and each quest's track button) */
.ql-tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.ql-tabs button { font-family: var(--sans); font-size: 14px; padding: 3px 10px; background: #2a2016; color: #c8b890; border: 1px solid #5e4a2a; cursor: pointer; }
.ql-tabs button.on { background: #5e4a2a; color: #ffe7a0; }
.ql-count { margin-left: auto; font-family: var(--sans); font-size: 13px; color: #c8b890; }
.ql-track { float: right; font-family: var(--sans); font-size: 12px; padding: 2px 8px; background: #2a2016; color: #a89878; border: 1px solid #5e4a2a; cursor: pointer; }
.ql-track.on { background: #3a5a1e; color: #d8ffb8; border-color: #6a8a3a; }
.help-grid { display: grid; gap: 7px; font-size: 15px; }
.help-grid b { color: var(--gold); }
.help-grid .tip { margin-top: 6px; padding: 10px; background: rgba(255, 140, 40, 0.08); border: 1px solid rgba(255, 160, 60, 0.25); border-radius: 6px; }

#death { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); text-align: center; background: var(--panel); border: 2px solid var(--panel-edge); padding: 20px 36px; border-radius: 8px; }
.d-title { font-family: var(--serif); font-size: 26px; color: #ff5a4a; margin-bottom: 14px; }

#banner { position: absolute; top: 24%; left: 50%; transform: translateX(-50%) scale(0.8); opacity: 0; pointer-events: none; text-align: center; padding: 26px 44px; background: radial-gradient(ellipse, rgba(40, 20, 0, 0.9), rgba(10, 5, 0, 0.8)); border: 2px solid var(--gold-dim); border-radius: 10px; transition: all 0.6s; }
#banner.show { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; cursor: pointer; }
.b-title { font-family: var(--serif); font-weight: 900; font-size: 40px; color: #ffe070; text-shadow: 0 0 20px #ff9a00; }
.b-sub { font-size: 18px; margin-top: 8px; }
.b-hint { font-size: 12px; color: var(--muted); margin-top: 12px; }

#tooltip { position: fixed; width: 290px; padding: 10px 12px; background: rgba(8, 8, 20, 0.95); border: 1px solid #5a5a7a; border-radius: 5px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); font-size: 14px; z-index: 30; pointer-events: none; }
.tt-name { font-weight: 700; font-size: 16px; color: #fff; margin-bottom: 4px; }
.tt-row { display: flex; justify-content: space-between; color: #fff; }
.tt-desc { margin-top: 6px; color: #ffd100; line-height: 1.35; }
.tt-lock { margin-top: 6px; color: #ff4040; }

/* ---------------------------------------------------------------- Nameplates and combat text */
#nameplates, #fct { position: absolute; inset: 0; overflow: hidden; }
.plate { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; will-change: transform; }
/* Blinded by Gloamveil (magic.js): no names or health over anyone */
body.mg-blind #nameplates { visibility: hidden; }
/* (Portsmith Tiny Homes' Plant and Leap: no names over the crowd, spenny.js) */
body.sp-noplates #nameplates { visibility: hidden; }
.bubble { position: absolute; left: 0; top: 0; max-width: 240px; width: max-content; padding: 6px 10px; border-radius: 8px; background: rgba(250, 246, 234, 0.94); color: #1e1a12; font: 13px/1.3 var(--sans); text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); will-change: transform; overflow-wrap: anywhere; transform-origin: 50% 100%; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: rgba(250, 246, 234, 0.94); }
.bubble.party { background: rgba(214, 228, 255, 0.95); color: #10203c; }
.bubble.party::after { border-top-color: rgba(214, 228, 255, 0.95); }
.bubble.yell { font-weight: 700; letter-spacing: 0.02em; background: rgba(255, 244, 214, 0.96); }
.pname { font-weight: 700; font-size: 14px; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.ptitle { font-size: 11px; color: #ccc; text-shadow: 0 1px 2px #000; margin-top: -2px; }
.plate.npc .pname { color: #5aff5a; }
.plate.npc .ptitle { color: #9fdc9f; }
/* a lord's or the King's title (crown.js) */
.plate .ptitle.noble { color: #f2c34d; font-weight: 600; }
.shop-terms { margin: 6px 4px 0; font-size: 12px; }
.plate.friend .pname { color: #6ab8ff; }
.plate.npc .pbar, .plate.friend .pbar { display: none; }
.pbar { width: 90px; height: 7px; margin: 2px auto 0; background: rgba(0, 0, 0, 0.75); border: 1px solid #000; border-radius: 2px; overflow: hidden; }
.pfill { height: 100%; background: linear-gradient(#ff6a5a, #c81a0a); }
.pcast { display: none; width: 90px; height: 5px; margin: 2px auto 0; background: rgba(0, 0, 0, 0.75); border: 1px solid #000; }
.pcfill { height: 100%; background: #ffb030; }
.plate.targeted .pbar { box-shadow: 0 0 0 1px #fff, 0 0 6px rgba(255, 255, 255, 0.6); }
.plate.targeted .pname { font-size: 15px; }
.plate.dead { opacity: 0.6; }
.plate.dead .pfill { width: 0 !important; }
.pmark { font-family: var(--serif); font-weight: 900; font-size: 34px; line-height: 1; height: 0; transform: translateY(-34px); text-shadow: 0 0 3px #000, 0 2px 2px #000; animation: bob 1.4s ease-in-out infinite; }
.pmark.gold { color: var(--gold); text-shadow: 0 0 10px rgba(255, 209, 0, 0.8), 0 2px 2px #000; }
.pmark.grey { color: #aaa; }
@keyframes bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }

.fct { position: absolute; left: 0; top: 0; font-family: var(--serif); font-weight: 900; white-space: nowrap; text-shadow: 0 2px 0 #000, 0 0 4px #000, 0 0 2px #000; will-change: transform, opacity; }
.fct.crit { letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- Action combat */
#classes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.cls { text-align: left; padding: 10px; border-radius: 6px; border: 1px solid #5a4a2a; background: rgba(0, 0, 0, 0.45); color: var(--text); cursor: pointer; font-family: var(--sans); }
.cls b { display: block; font-family: var(--serif); color: var(--gold); font-size: 15px; margin-bottom: 3px; }
.cls span { font-size: 13px; color: var(--muted); }
.cls.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 209, 0, 0.35); background: rgba(60, 40, 10, 0.5); }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; display: none; }
body.combat-mode #crosshair { display: block; }
#crosshair .dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.7); }
/* the bow's aiming circle while drawing: as wide as the arrows may stray (archer.js, October 2026) */
#bow-circle { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); pointer-events: none; display: none; transition: width 0.06s linear, height 0.06s linear; }
#bow-circle.full { border-color: rgba(255, 214, 112, 0.85); }
#bow-circle.tired { border-color: rgba(255, 140, 100, 0.85); }
#dodge-ring { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; opacity: 0; transition: opacity 0.2s;
  -webkit-mask: radial-gradient(circle, transparent 11px, #000 12px); mask: radial-gradient(circle, transparent 11px, #000 12px); }
/* First person (firstperson.js): a fine cross with a gap round the dot */
body.first-person #crosshair .dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
body.first-person #crosshair::before, body.first-person #crosshair::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); }
body.first-person #crosshair::before { left: -10px; top: -1px; width: 20px; height: 2px; -webkit-mask: linear-gradient(90deg, #000 30%, transparent 30% 70%, #000 70%); mask: linear-gradient(90deg, #000 30%, transparent 30% 70%, #000 70%); }
body.first-person #crosshair::after { top: -10px; left: -1px; height: 20px; width: 2px; -webkit-mask: linear-gradient(#000 30%, transparent 30% 70%, #000 70%); mask: linear-gradient(#000 30%, transparent 30% 70%, #000 70%); }
/* (a melee blow would reach someone: fpmelee.js) */
body.first-person #crosshair.in-reach .dot { background: #ffb347; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 6px rgba(255, 150, 40, 0.8); }
body.first-person #crosshair.in-reach::before, body.first-person #crosshair.in-reach::after { background: #ffd28a; }
#hitmarker { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0; transform: rotate(45deg) scale(0.6); }
#hitmarker::before, #hitmarker::after { content: ''; position: absolute; background: #fff; box-shadow: 0 0 3px #000; }
#hitmarker::before { left: 12px; top: 0; width: 2px; height: 26px; -webkit-mask: linear-gradient(#000 35%, transparent 35% 65%, #000 65%); mask: linear-gradient(#000 35%, transparent 35% 65%, #000 65%); }
#hitmarker::after { top: 12px; left: 0; height: 2px; width: 26px; -webkit-mask: linear-gradient(90deg, #000 35%, transparent 35% 65%, #000 65%); mask: linear-gradient(90deg, #000 35%, transparent 35% 65%, #000 65%); }
#hitmarker.show { opacity: 1; transform: rotate(45deg) scale(1); transition: transform 0.08s ease-out; }
#hitmarker.crit::before, #hitmarker.crit::after { background: #ffd24a; }
#hitmarker.kill { transform: rotate(45deg) scale(1.5); }
#hitmarker.kill.show { transform: rotate(45deg) scale(1.7); }
#hitmarker.kill::before, #hitmarker.kill::after { background: #ff3a2a; width: 3px; }
#hitmarker.kill::after { width: 26px; height: 3px; }

#reticle { position: absolute; left: 50%; top: 50%; display: none; }
/* (a melee hero's aiming arrows only in combat mode, where blows are swung) */
body.cls-fighter.combat-mode #reticle { display: block; }
.ret { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: rgba(255, 255, 255, 0.18); text-shadow: 0 0 3px #000; transition: color 0.08s, transform 0.08s; }
#ret-overhead { transform: translateY(-42px); }
#ret-thrust { transform: translateY(42px); }
#ret-left { transform: translateX(-46px); }
#ret-right { transform: translateX(46px); }
.ret.aim { color: rgba(255, 255, 255, 0.55); }
.ret.wind { color: #ffe070; text-shadow: 0 0 8px #ffb000; }
.ret.heavy { color: #ff9a30; text-shadow: 0 0 12px #ff5a00; font-size: 24px; }
.ret.swing { color: #ffffff; text-shadow: 0 0 10px #fff; }
.ret.block { color: #7ac8ff; text-shadow: 0 0 10px #2a8aff; font-size: 24px; }
.ret.danger { color: #ff5a4a; text-shadow: 0 0 8px #ff0000; }
.ret.danger-hi { color: #ff2010; text-shadow: 0 0 14px #ff0000; font-size: 26px; animation: dangerPulse 0.15s infinite alternate; }
.ret.block.danger, .ret.block.danger-hi { color: #b0f0ff; text-shadow: 0 0 14px #5ad0ff, 0 0 4px #ff2010; }
@keyframes dangerPulse { from { opacity: 1; } to { opacity: 0.6; } }
#combo { position: absolute; left: 50%; top: calc(50% + 70px); transform: translateX(-50%); text-align: center; font-family: var(--serif); font-weight: 700; text-shadow: 0 1px 3px #000; }
#combo .chain { color: #ffe0a0; font-size: 18px; letter-spacing: 4px; }
#combo .riposte { display: block; color: #9fe0ff; font-size: 16px; animation: dangerPulse 0.2s infinite alternate; }

#dmgdirs { position: absolute; inset: 0; pointer-events: none; }
.dmgdir { position: absolute; left: 50%; top: 50%; width: 46vmin; height: 46vmin; border-radius: 50%;
  border-top: 7px solid rgba(255, 30, 20, 0.85); filter: blur(1px); animation: dmgFade 0.9s ease-out forwards;
  -webkit-mask: conic-gradient(from -30deg, #000 0 60deg, transparent 60deg); mask: conic-gradient(from -30deg, #000 0 60deg, transparent 60deg); }
@keyframes dmgFade { from { opacity: 1; } to { opacity: 0; } }

.bar.stamina .fill { background: linear-gradient(#ffe38a, #e0a820 45%, #7a5400) !important; }
/* your horse's health, under your own while it is out (mounts.js) */
.bar.horse .fill { background: linear-gradient(#f0b07a, #b0602a 45%, #5a2c10) !important; }
.slot .mb { position: absolute; bottom: 2px; left: 3px; font-size: 9px; font-weight: 700; color: #ffe; background: rgba(0, 0, 0, 0.55); padding: 0 3px; border-radius: 2px; }
.pmark.atk { color: #ff3a2a; font-size: 30px; text-shadow: 0 0 8px #ff0000, 0 2px 2px #000; animation: none; }
.pmark.guard { color: #8ac8ff; font-size: 16px; line-height: 20px; height: 20px; width: 26px; margin: 0 auto; transform: translateY(-26px); border: 2px solid #5aa8ff; border-radius: 4px 4px 13px 13px; background: rgba(20, 50, 100, 0.6); text-shadow: none; animation: none; }
body.cls-mage .fighter-only, body.cls-fighter .mage-only { display: none; }
.help-grid .red { color: #ff5a4a; font-weight: 700; }
.help-grid .blue { color: #7ac8ff; font-weight: 700; }

/* Zone travel fade */
#travel {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(20, 14, 30, 0.85), rgba(4, 3, 8, 0.97));
  transition: opacity 0.25s;
}
#travel.hidden { opacity: 0; pointer-events: none; display: flex; }
#travel .msg { font-family: Cinzel, serif; color: #e8d8a0; font-size: 26px; letter-spacing: 0.06em; text-shadow: 0 2px 8px #000; }
.qd-quest.svc .qm.svc { color: #9fd3ff; }

/* ---------------------------------------------------------------- Item windows */
.win { display: flex; flex-direction: column; z-index: 20; }
.win .x, #quest-log .x { position: absolute; right: 8px; top: 4px; background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; }
.win .x:hover { color: var(--gold); }
/* (wide enough for five of the stone-framed slots, 48px: they overflowed
   the 296px it was, with a scrollbar under the bag) */
#bag-win { right: 24px; top: 96px; width: 320px; max-width: calc(100vw - 48px); }
/* (the character sheet beside the bag, so both can be open at once) */
#char-win { right: 334px; top: 96px; width: 480px; max-width: calc(100vw - 358px); }
/* (no taller than the screen, under the interface size's zoom: on a short
   one it rises towards the top, and then the stats below the hero scroll,
   the hero and the slots kept whole; before, it ran off the bottom of the
   screen and took the hero's legs with it: October 2026, the user's) */
#char-win { --cs-top: clamp(12px, calc(100vh / var(--ui) - 896px), 96px); top: var(--cs-top); max-height: calc(100vh / var(--ui) - var(--cs-top) - 8px); }
#char-win .cs-sheet { flex: 0 1 auto; min-height: 0; }
#char-win .cs-doll { flex: none; }
.cs-more { display: flex; flex-direction: column; gap: 10px; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* (the hint under it, with them: a short screen keeps the hero, not the hint) */
.cs-more .win-hint { padding: 0 0 8px; }
.cs-sheet { padding: 12px 14px 4px; flex: none; }
#bag-win .cs-bag { padding: 10px 12px 4px; }
#bag-win .cs-bag-head .gold-line { margin: 0; }
#shop-win { left: 24px; top: 120px; width: 340px; max-height: calc(100vh - 300px); }
#bank-win, #chest-win { left: 24px; top: 120px; width: 340px; }
#trade-win { left: 24px; top: 120px; width: 600px; max-width: calc(100vw - 480px); }
.trade-body { display: flex; gap: 20px; }
.trade-gold { margin-top: 8px; color: var(--gold); font-family: var(--serif); font-size: 14px; }
.trade-gold input { width: 80px; margin-left: 6px; background: #0c0a08; color: #fff; border: 1px solid #4a3a1a; border-radius: 3px; padding: 3px 6px; }
.trade-flag { margin-top: 6px; min-height: 18px; color: #6aff6a; font-size: 13px; }
.trade-row { padding: 0 14px; gap: 8px; }
#invite-box { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); padding: 12px 16px; z-index: 40; min-width: 280px; text-align: center; color: #f2e0b0; }
.win-body { display: flex; gap: 12px; padding: 12px 14px; }
.doll { display: grid; grid-template-columns: repeat(2, 64px); gap: 6px 8px; align-content: start; }
.doll-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.doll-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.bagside { flex: 1; }
.win-label { font-family: var(--serif); color: #e8c060; font-size: 13px; margin-bottom: 6px; }
.grid { display: grid; grid-template-columns: repeat(5, 46px); gap: 5px; }
.islot { width: 46px; height: 46px; border-radius: 5px; background: linear-gradient(#1c1812, #0c0a08); border: 1px solid #4a3a1a; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8); position: relative; cursor: pointer; }
.islot.empty { cursor: default; opacity: 0.55; }
.islot:not(.empty):hover { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 209, 0, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.8); }
.islot img { width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.islot .qty { position: absolute; right: 3px; bottom: 1px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.gold-line { margin-top: 10px; color: var(--gold); font-family: var(--serif); font-size: 14px; }
.win-hint { padding: 6px 14px 10px; color: var(--muted); font-size: 12px; }
.win-row { margin-top: 10px; display: flex; justify-content: flex-end; }
.shop-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(107, 84, 36, 0.3); }
.shop-name { flex: 1; color: #efe4c8; }
.btn.small { font-size: 12px; padding: 4px 10px; }
#item-menu { position: fixed; z-index: 80; background: #14100a; border: 1px solid var(--panel-edge); border-radius: 4px; padding: 3px; display: flex; flex-direction: column; min-width: 140px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); }
#item-menu button { background: none; border: 0; color: #f2e0b0; text-align: left; padding: 6px 10px; font-family: var(--sans); font-size: 14px; cursor: pointer; border-radius: 3px; }
#item-menu button:hover { background: rgba(255, 209, 0, 0.12); color: var(--gold); }
#tooltip .tt-name { font-weight: 700; font-size: 15px; color: #fff; }
#tooltip .tt-name.weapon, #tooltip .tt-name.armor { color: #9fd3ff; }
#tooltip .tt-name.quest { color: #ffd100; }
#tooltip .tt-name.scroll, #tooltip .tt-name.spellbook, #tooltip .tt-name.spell { color: #d8a8ff; }
#tooltip .tt-name.mount { color: #ffb347; }
/* An item's rarity (rarity.js, the loot clean-up): its name's colour, and an edge on its cell from uncommon up */
.r-common { color: #e8e2d4; } .r-uncommon { color: #5ed65e; } .r-rare { color: #4da6ff; } .r-epic { color: #c47aff; } .r-legendary { color: #ff9d2e; }
#tooltip .tt-name.r-common { color: #f4efe4; } #tooltip .tt-name.r-uncommon { color: #5ed65e; } #tooltip .tt-name.r-rare { color: #4da6ff; } #tooltip .tt-name.r-epic { color: #c47aff; } #tooltip .tt-name.r-legendary { color: #ff9d2e; text-shadow: 0 0 6px rgba(255, 140, 30, 0.55); }
#tooltip .tt-sub .r-common { color: var(--muted); }
#chat-log .rname.r-common { color: inherit; }
.plate.loot .pname.r-uncommon { color: #5ed65e; } .plate.loot .pname.r-rare { color: #4da6ff; } .plate.loot .pname.r-epic { color: #c47aff; } .plate.loot .pname.r-legendary { color: #ff9d2e; }
.islot.r-uncommon::after, .islot.r-rare::after, .islot.r-epic::after, .islot.r-legendary::after { content: ''; position: absolute; inset: -1px; border: 2px solid currentColor; box-shadow: inset 0 0 8px currentColor; opacity: 0.7; pointer-events: none; }
.islot.r-legendary::after { opacity: 0.9; }
/* (on parchment, the shop's page and the Bestiary: the same colours, deep enough to read) */
.ux-page .r-common, .bst-had .r-common { color: inherit; } .ux-page .r-uncommon, .bst-had .r-uncommon { color: #2a6e16; } .ux-page .r-rare, .bst-had .r-rare { color: #17549c; } .ux-page .r-epic, .bst-had .r-epic { color: #6e2a9e; } .ux-page .r-legendary, .bst-had .r-legendary { color: #a24e00; }
/* (but the dark well a shop's page shows the tooltip in keeps the bright ones) */
.ux-page .ux-well .r-common { color: #f4efe4; } .ux-page .ux-well .tt-sub .r-common { color: inherit; } .ux-page .ux-well .r-uncommon { color: #5ed65e; } .ux-page .ux-well .r-rare { color: #4da6ff; } .ux-page .ux-well .r-epic { color: #c47aff; } .ux-page .ux-well .r-legendary { color: #ff9d2e; }
#tooltip .tt-sub { color: var(--muted); font-size: 12px; text-transform: capitalize; margin-bottom: 4px; }
#tooltip .tt-desc { color: #e8d8a0; font-style: italic; margin-top: 4px; }
#tooltip .tt-use { color: #6aff6a; }
#tooltip .tt-note { color: #b8ad94; font-size: 12px; }
#tooltip .tt-val, #tooltip .tt-price { color: var(--gold); margin-top: 4px; font-size: 12px; }

#login-err { color: #ff7a6a; min-height: 18px; font-size: 14px; margin-top: 6px; }
#password { width: 100%; }

/* ---------------------------------------------------------------- Moderator panel */
#mod-win { left: 50%; transform: translateX(-50%); top: 9%; width: 720px; max-height: 80vh; }
.mod-top, .mod-toggles { display: flex; gap: 8px; padding: 10px 14px 0; flex-wrap: wrap; }
.mod-tog { background: rgba(0, 0, 0, 0.35); border: 1px solid #4a3a1a; color: #c8b890; padding: 5px 12px; border-radius: 14px; cursor: pointer; font-family: var(--sans); font-weight: 700; }
.mod-tog.on { border-color: #6aff8a; color: #6aff8a; background: rgba(40, 120, 60, 0.3); }
.mod-skills { flex-wrap: wrap; row-gap: 6px; }
.mod-skill { display: inline-flex; align-items: center; gap: 4px; color: #c8b890; font-size: 13px; }
.mod-skill input { width: 46px; background: #0c0a08; border: 1px solid #4a3a1a; color: var(--text); padding: 4px 6px; font-family: var(--sans); }
.mod-cols { display: flex; gap: 14px; padding: 10px 14px 14px; min-height: 0; }
.mod-col { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mod-col input { background: #0c0a08; border: 1px solid #4a3a1a; color: var(--text); padding: 5px 8px; border-radius: 4px; margin-bottom: 6px; font-family: var(--sans); }
.mod-list { overflow-y: auto; max-height: 52vh; display: flex; flex-direction: column; gap: 3px; }
.mod-row { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.3); border: 1px solid transparent; color: #f2e0b0; padding: 5px 8px; border-radius: 4px; cursor: pointer; font-family: var(--sans); font-size: 14px; text-align: left; }
.mod-row:hover { border-color: var(--gold-dim); }
.mod-row.here { border-color: #ffe24a; }
.mod-row em { color: var(--muted); font-size: 11px; }
.mod-player { background: rgba(0, 0, 0, 0.3); border-radius: 4px; padding: 6px 8px; }
.mp-name { font-weight: 700; color: #ffe8a0; }
.mp-name em, .mp-zone { color: var(--muted); font-size: 12px; font-style: normal; }
.mp-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mp-acts button { background: #2a1a10; border: 1px solid #6b5424; color: var(--gold); font-size: 12px; padding: 3px 8px; border-radius: 3px; cursor: pointer; }
.mp-acts button:hover { filter: brightness(1.3); }

/* ---------------------------------------------------------------- Full map */
#map-win { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.map-frame { position: relative; display: flex; flex-direction: column; }
.map-tabs { display: flex; gap: 4px; margin-left: 14px; }
.map-tabs button { background: rgba(0, 0, 0, 0.35); border: 1px solid #4a3a1a; color: #c8b890; padding: 3px 12px; border-radius: 3px; cursor: pointer; font-family: var(--serif); font-size: 12px; }
.map-tabs button.on { color: var(--gold); border-color: var(--gold-dim); }
#map-canvas { display: block; margin: 8px 12px; border-radius: 4px; }
.map-foot { padding: 0 14px 10px; color: var(--muted); font-size: 13px; }

#bag-grid { max-height: 330px; overflow-y: auto; padding-right: 4px; }
/* (the pages of the spellbook in the left hand, under the bag) */
/* (straps, ropes and spellbooks under the bag: backlog #74) */
.bag-boxes:not(:empty) { margin-top: 6px; max-height: 42vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
#bag-boxes .grid { overflow: visible; max-height: none; padding: 2px 4px; grid-template-columns: repeat(5, 48px); }
.bag-box { margin-top: 4px; }
.box-head { display: flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #c9b27a; cursor: pointer; user-select: none; padding: 2px 0; }
.box-head:hover { color: #f0d890; }
.box-arrow { width: 10px; color: #8a7448; }
.box-n { margin-left: auto; color: #8a7448; text-transform: none; }
.bag-box.hand .box-head { color: #b9a8e8; }
.islot .fill { position: absolute; left: 3px; top: 1px; font-size: 10px; font-weight: 700; color: #f0d890; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }

#classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Class picker (J) */
.mod-classes { display: flex; gap: 8px; align-items: center; padding: 10px 14px 0; }
.mod-classes .win-label { margin: 0 6px 0 0; }

/* Guarding (every class): the reticle shows incoming blows and your guard */
body.guarding #reticle { display: block; }
.ret.danger-heavy { text-shadow: 0 0 14px #ff6a00, 0 0 4px #ff0000; font-size: 28px; }
.ret.eguard { border: 2px solid rgba(90, 168, 255, 0.85); border-radius: 4px 4px 13px 13px; background: rgba(20, 50, 100, 0.35); color: #8ac8ff; }
.ret.eguard.aim, .ret.eguard.wind, .ret.eguard.heavy { border-color: #ff9a6a; box-shadow: 0 0 8px rgba(255, 90, 40, 0.6); }
.plate.neutral .pfill { background: linear-gradient(#ffe45c, #c8a010); }
#mod-level-in { width: 56px; background: #0c0a08; border: 1px solid #4a3a1a; color: var(--text); padding: 4px 6px; border-radius: 4px; font-family: var(--sans); }
.mod-classes { flex-wrap: wrap; }
.band { margin-bottom: 6px; }
.band-head { display: flex; flex-direction: column; align-items: flex-start; width: 100%; background: linear-gradient(90deg, rgba(107, 84, 36, 0.45), rgba(107, 84, 36, 0.05)); border: 0; border-left: 3px solid var(--gold-dim); color: var(--gold); padding: 5px 8px; margin: 2px 0 3px; cursor: pointer; text-align: left; font-family: var(--serif); font-size: 13px; }
.band-head.static { cursor: default; }
.band-head em { font-family: var(--sans); font-style: italic; color: var(--muted); font-size: 11px; }
.mod-row.map.child { margin-left: 16px; padding-top: 3px; padding-bottom: 3px; font-size: 13px; background: rgba(0, 0, 0, 0.18); }
.mod-row .tw { color: var(--muted); margin-right: 5px; font-weight: 400; }
.mod-row em { display: flex; gap: 5px; align-items: center; font-style: normal; }
.mod-row i { font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: #cbbd98; }
.mod-row i.lv { background: rgba(255, 209, 0, 0.12); color: var(--gold); min-width: 38px; text-align: center; }
.mod-row i.type.dungeon, .mod-row i.type.cave { color: #ff9a7a; }
.mod-row i.type.village, .mod-row i.type.capital { color: #9fd3ff; }
.mod-row i.type.place { color: #dda8ff; }
.mod-row i.diff.medium { color: #ffd070; }
.mod-row i.diff.hard { color: #ff9a4a; }
.mod-row i.diff.extreme { color: #ff5a4a; background: rgba(255, 60, 40, 0.15); }

/* ---------------------------------------------------------------- The map (M) */
#map-win { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(10, 6, 2, 0.55), rgba(0, 0, 0, 0.8)); }
#map-win .map-frame {
  position: relative; display: flex; flex-direction: column; width: min(1400px, calc(100vw - 48px)); height: min(920px, calc(100vh - 48px));
  background: linear-gradient(#5a3a1c, #3a2410); border: 2px solid #b08a44; border-radius: 10px; padding: 10px 12px 8px;
  box-shadow: 0 0 0 1px #1a0e04, 0 20px 60px rgba(0, 0, 0, 0.7), inset 0 0 24px rgba(0, 0, 0, 0.6);
}
#map-win .map-frame::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(232, 200, 120, 0.35); border-radius: 7px; pointer-events: none; }
.map-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 8px; }
.map-title { font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: 26px; letter-spacing: 0.08em; background: linear-gradient(#fff4c0, #e8b040); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.map-sub { color: #d8c49a; font-size: 14px; margin-top: -2px; }
.map-sub b { color: #fff0c8; }
.map-tools { display: flex; gap: 6px; }
.map-tools button { background: linear-gradient(#6a4a26, #3a2612); border: 1px solid #b08a44; color: #f0dca8; border-radius: 5px; padding: 5px 11px; font-family: Cinzel, Georgia, serif; font-size: 13px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.2); }
.map-tools button:hover { filter: brightness(1.25); }
.map-tools .map-x { font-size: 18px; padding: 2px 10px; }
.map-body { position: relative; flex: 1; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 2px #2a1808, inset 0 0 30px rgba(40, 20, 0, 0.6); }
#map-canvas { width: 100%; height: 100%; display: block; cursor: grab; margin: 0; border-radius: 6px; }
#map-tip { position: absolute; pointer-events: none; background: rgba(28, 18, 8, 0.94); border: 1px solid #b08a44; border-radius: 5px; padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 120px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
#map-tip b { font-family: Cinzel, Georgia, serif; color: #ffe8a8; font-size: 14px; }
#map-tip span { font-size: 12px; font-weight: 700; }
#map-tip em { color: #c8b890; font-size: 12px; }
#map-win .map-foot { color: #c8b48a; font-size: 12px; padding: 6px 6px 0; }
.mod-list .mod-row.map { width: 100%; box-sizing: border-box; }
.mod-list .mod-row.map.child { width: calc(100% - 16px); }

/* ---------------------------------------------------------------- Cutscenes */
body.cinematic #hud > *:not(#nameplates):not(#fct) { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
body.cinematic #nameplates { opacity: 0; }
#cine { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
#cine .cine-bar { position: absolute; left: 0; right: 0; height: 13vh; background: #000; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
#cine .cine-bar.top { top: 0; transform: translateY(-100%); }
#cine .cine-bar.bottom { bottom: 0; transform: translateY(100%); display: flex; align-items: center; justify-content: center; }
#cine.on .cine-bar { transform: translateY(0); }
/* a blow landing in a scene: a red flash (cutscene.js) */
#cine::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(160, 0, 0, 0.15), rgba(110, 0, 0, 0.75)); opacity: 0; transition: opacity 0.9s ease-out; }
#cine.struck::after { opacity: 1; transition: none; }
/* put down by a quest, and woken (questfx.js) */
#ko { position: fixed; inset: 0; z-index: 80; background: #000; opacity: 0; transition: opacity 0.9s ease; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#ko.on { opacity: 1; pointer-events: auto; }
#ko .ko-text { color: #e8dcc0; font-family: var(--serif, Georgia, serif); font-size: 26px; letter-spacing: 0.06em; text-shadow: 0 2px 6px #000; }
.cine-sub { max-width: 860px; padding: 0 24px; text-align: center; }
.cine-who { font-family: Cinzel, Georgia, serif; color: #ffd100; font-weight: 700; font-size: 15px; letter-spacing: 0.08em; margin-bottom: 4px; }
.cine-text { color: #f4ecd8; font-size: 22px; line-height: 1.35; min-height: 30px; text-shadow: 0 2px 4px #000; font-family: 'Alegreya Sans', sans-serif; }
.cine-skip { position: absolute; right: 22px; top: calc(13vh + 12px); color: rgba(255, 255, 255, 0.75); font-size: 13px; text-shadow: 0 1px 3px #000; opacity: 0; transition: opacity 0.6s 0.4s; }
#cine.on .cine-skip { opacity: 1; }
.cine-skip b { color: #ffd100; }
.cine-hint { position: absolute; left: 22px; top: calc(13vh + 12px); color: rgba(255, 230, 160, 0.8); font-size: 13px; text-shadow: 0 1px 3px #000; }

/* Bigger, clearer attack and guard arrows */
.ret { width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 28px; }
#ret-overhead { transform: translateY(-66px); }
#ret-thrust { transform: translateY(66px); }
#ret-left { transform: translateX(-72px); }
#ret-right { transform: translateX(72px); }
.ret.heavy { font-size: 36px; }
.ret.block { font-size: 36px; }
.ret.danger { font-size: 40px; color: #ff4a3a; text-shadow: 0 0 12px #ff0000, 0 0 2px #000; }
.ret.danger-hi { font-size: 50px; text-shadow: 0 0 20px #ff0000, 0 0 3px #000; }
.ret.danger-heavy { font-size: 54px; }
.ret.block.danger, .ret.block.danger-hi { font-size: 50px; }
.pmark.atk { font-size: 46px; transform: translateY(-46px); text-shadow: 0 0 12px #ff0000, 0 2px 3px #000; }

/* A quick fade through doors, with where you are going. */
#door-fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.24s ease; z-index: 40; display: flex; align-items: center; justify-content: center; }
#door-fade.on { opacity: 1; }
/* The loading screen into and out of the dungeons (loadscreen.js): a
   picture of the place, its name and levels, a bar as it loads */
#place-load { position: fixed; inset: 0; z-index: 61; background: #06050a; transition: opacity 0.16s ease; display: block; }
#place-load.hidden { opacity: 0; pointer-events: none; transition-duration: 0.3s; }
#place-load .pl-art { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #2a1e40, #06050a) center / cover no-repeat; image-rendering: pixelated; }
#place-load .pl-art:not(.none) { background-size: cover; background-position: center; filter: saturate(1.05) brightness(0.9); }
#place-load .pl-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 3, 8, 0.92) 0%, rgba(4, 3, 8, 0.55) 30%, rgba(4, 3, 8, 0) 60%), radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%); }
#place-load .pl-card { position: absolute; left: max(32px, env(safe-area-inset-left, 0px)); right: max(32px, env(safe-area-inset-right, 0px)); bottom: calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; }
#place-load .pl-kind { font-family: var(--display); color: #c8b890; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 2px 6px #000; }
#place-load .pl-name { font-family: var(--display); font-size: clamp(30px, 5vw, 52px); line-height: 1.05; letter-spacing: 0.04em; color: #ffe8a8; text-shadow: 0 3px 0 #3a2208, 0 4px 18px rgba(0, 0, 0, 0.9); }
#place-load .pl-sub { color: #d8ccb0; font-size: 16px; text-shadow: 0 2px 6px #000; min-height: 1.2em; }
#place-load .pl-bar { margin-top: 10px; height: 6px; max-width: 420px; background: rgba(0, 0, 0, 0.6); border: 1px solid #6a5424; box-shadow: 0 0 0 1px #000; }
#place-load .pl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#ffe08a, #c98a24); transition: width 0.2s linear; }
@media (prefers-reduced-motion: reduce) { #place-load, #place-load .pl-bar i { transition: none; } }
#door-fade .msg { font-family: Cinzel, Georgia, serif; color: #e8d4a8; font-size: 28px; letter-spacing: 6px; text-transform: uppercase; opacity: 0.85; }

/* Cooking at a campfire */
#use-hint, #chest-hint, #gather-hint, #fish-hint, #tommy-hint, #glide-hint, #pet-hint, #lp-hint, #fort-hint, #house-hint, #farm-hint, #arena-hint, #sp-hint, #warren-hint, #moment-hint { position: absolute; left: 50%; bottom: 205px; transform: translateX(-50%); padding: 7px 16px; font: 15px var(--sans); color: #f0e2c0; background: rgba(12, 9, 5, 0.78); border: 1px solid var(--gold-dim); border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.2s; text-shadow: 0 1px 2px #000; }
#use-hint.on, #chest-hint.on, #gather-hint.on, #fish-hint.on, #tommy-hint.on, #glide-hint, #pet-hint.on, #lp-hint.on, #fort-hint.on, #house-hint.on, #farm-hint.on, #arena-hint.on, #sp-hint.on, #warren-hint.on, #moment-hint.on { opacity: 1; }
/* a dungeon's slow moments (moments.js): a bar filled standing still */
#moment-bar { position: absolute; left: 50%; bottom: 252px; width: 260px; height: 16px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 2px #000, 0 0 0 3px #a8a498, 0 0 0 4px #000; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
#moment-bar.on { opacity: 1; }
#moment-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffe890, #d8a020); box-shadow: inset 1px 1px 0 #fff8c0, inset -1px -1px 0 #6e4a00; }
#moment-bar span { position: absolute; left: 0; right: 0; top: -22px; text-align: center; font: 14px var(--sans); color: #f0e2c0; text-shadow: 0 1px 2px #000; }
/* gathering: when to press F for a perfect blow */
#gather-bar { position: absolute; left: 50%; bottom: 252px; width: 240px; height: 12px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 2px #000, 0 0 0 3px #a8a498, 0 0 0 4px #000; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
#gather-bar.on { opacity: 1; }
#gather-bar i { position: absolute; top: 0; bottom: 0; }
#gather-bar .zone { background: linear-gradient(#ffe890, #d8a020); box-shadow: inset 1px 1px 0 #fff8c0, inset -1px -1px 0 #6e4a00; }
#gather-bar .needle { width: 3px; margin-left: -1px; top: -4px; bottom: -4px; background: #fff; box-shadow: 0 0 0 1px #000; }
#gather-bar.perfect .zone { background: #fff6b0; box-shadow: 0 0 10px 3px rgba(255, 216, 74, 0.9); }
#gather-bar.off .zone { filter: grayscale(1) brightness(0.6); }
#use-hint b, #chest-hint b, #gather-hint b, #fish-hint b, #fish-bar .fb-say b, #tommy-hint b, #glide-hint, #pet-hint b, #lp-hint b, #fort-hint b, #house-hint b, #farm-hint b, #arena-hint b, #sp-hint b, #warren-hint b, #moment-hint b { display: inline-block; min-width: 20px; margin-right: 6px; padding: 0 5px; color: #1a1206; background: var(--gold); border-radius: 3px; text-align: center; }
/* the crafting window (crafting.js), laid out as the 2D game's: materials,
   the station, what comes out, then how many; the recipes in a strip below */
#craft-win { width: 500px; }
.craft-forge { display: grid; grid-template-columns: 1fr 112px 1fr; grid-template-rows: auto auto auto; align-items: center; gap: 8px 10px; padding: 4px 0 10px; border-bottom: 1px solid rgba(107, 84, 36, 0.35); }
.craft-mats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.craft-mat { position: relative; width: 44px; height: 44px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--gold-dim); display: flex; align-items: center; justify-content: center; }
.craft-mat img { width: 44px; height: 44px; image-rendering: pixelated; }
.craft-mat span { position: absolute; right: 1px; bottom: -1px; font: 12px var(--sans); color: #e8f0c0; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
.craft-mat.missing span { color: #ff7a5a; }
.craft-mat.missing { border-color: #8a3a2a; }
.craft-mat.gold b { font: 22px var(--sans); color: var(--gold); }
.craft-station { text-align: center; }
.craft-station img { width: 96px; height: 96px; image-rendering: pixelated; }
.craft-result { text-align: center; }
.craft-result img { width: 44px; height: 44px; image-rendering: pixelated; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--gold); }
.craft-out-name { font: 15px var(--sans); color: var(--gold); margin-top: 2px; }
.craft-out-qty { font: 14px var(--sans); color: #e8f0c0; }
.craft-msg { grid-column: 1 / -1; text-align: center; font: 15px var(--sans); color: #ff9a6a; }
.craft-msg.ready { color: #7aff5a; }
.craft-qty { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 6px; }
.craft-qty input { width: 64px; text-align: center; }
.craft-qty .btn.on { box-shadow: inset 0 0 0 2px var(--gold); }
/* (working at a station: how far through this one, crafting.js) */
.craft-prog { grid-column: 1 / -1; height: 5px; margin: 2px 24px 0; background: rgba(0, 0, 0, 0.45); border-radius: 3px; overflow: hidden; }
.craft-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c89a3a, #ffd36a); }
.craft-qty .btn[disabled] { opacity: 0.4; cursor: default; }
.craft-label { margin-top: 8px; }
.craft-strip { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; padding: 4px 0; }
.craft-recipe { width: 88px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(107, 84, 36, 0.6); color: #f0e2c0; cursor: pointer; font: 12px var(--sans); line-height: 1.1; text-align: center; }
.craft-recipe img { width: 44px; height: 44px; image-rendering: pixelated; }
.craft-recipe.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: rgba(80, 60, 20, 0.45); }
.craft-recipe.unavailable img { opacity: 0.45; }
.craft-recipe.unavailable span { color: #9a8a66; }

/* ---------------------------------------------------------------- Character sheet */
.cs-body { display: flex; gap: 16px; padding: 12px 14px 4px; }
.cs-left { flex: 0 0 440px; display: flex; flex-direction: column; gap: 10px; }
.cs-doll { display: flex; gap: 10px; align-items: stretch; }
.cs-col { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; width: 64px; }
.cs-view { position: relative; flex: 1; min-height: 330px; border-radius: 8px; overflow: hidden; border: 1px solid #4a3a1a;
  background: radial-gradient(ellipse at 50% 38%, rgba(96, 76, 44, 0.55), rgba(18, 14, 10, 0.95) 70%), #0e0b08;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.75); transition: box-shadow 0.15s, border-color 0.15s; }
.cs-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.cs-view canvas.turning { cursor: grabbing; }
.cs-turn { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 11px; color: rgba(232, 216, 170, 0.45); pointer-events: none; letter-spacing: 0.04em; }
.cs-view.can-drop, .grid.can-drop { border-color: var(--gold); box-shadow: 0 0 14px rgba(255, 209, 0, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.6); }
.doll-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.doll-slot .islot { width: 54px; height: 54px; }
/* (item sprites are 44px, twice their pixels: kept whole in the larger slot) */
.doll-slot .islot img { width: 44px; height: 44px; margin: 4px; }
.doll-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; text-align: center; line-height: 1.1; }
.doll-empty { display: flex; align-items: center; justify-content: center; opacity: 1 !important; }
.doll-empty svg { width: 30px; height: 30px; fill: rgba(200, 176, 120, 0.16); }
.islot.can-drop { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 209, 0, 0.55), inset 0 0 8px rgba(0, 0, 0, 0.8); animation: can-drop 0.9s ease-in-out infinite alternate; }
@keyframes can-drop { from { box-shadow: 0 0 4px rgba(255, 209, 0, 0.3), inset 0 0 8px rgba(0, 0, 0, 0.8); } to { box-shadow: 0 0 14px rgba(255, 209, 0, 0.7), inset 0 0 8px rgba(0, 0, 0, 0.8); } }
.islot.lifted { opacity: 0.35; }
#bag-win.dragging .islot:not(.can-drop), #char-win.dragging .islot:not(.can-drop) { cursor: grabbing; }
#drag-ghost { position: fixed; left: 0; top: 0; width: 46px; height: 46px; z-index: 100; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)); }
#drag-ghost img { width: 44px; height: 44px; margin: 1px; image-rendering: pixelated; }
.cs-stats { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(107, 84, 36, 0.45); }
.cs-bar { position: relative; height: 18px; border-radius: 3px; background: rgba(0, 0, 0, 0.6); border: 1px solid #000; overflow: hidden; }
.cs-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.cs-bar.hp .cs-fill { background: linear-gradient(#3fd04a, #178a20); }
.cs-bar.mana .cs-fill { background: linear-gradient(#4a8cf0, #1a4ab0); }
.cs-bar.stam .cs-fill { background: linear-gradient(#e8c24a, #a07a1a); }
.cs-bar.xp { height: 12px; }
.cs-bar.xp .cs-fill { background: linear-gradient(#b87aff, #6a3ab8); }
.cs-bar-t { position: relative; display: block; padding: 0 8px; font-size: 12px; line-height: 16px; color: #f2ead8; text-shadow: 0 1px 2px #000; }
.cs-bar.xp .cs-bar-t { font-size: 10px; line-height: 11px; }
.cs-bar-t b { float: right; font-weight: 700; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 2px 0; }
.cs-stat { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); border-bottom: 1px dotted rgba(107, 84, 36, 0.4); padding: 2px 0; cursor: default; }
.cs-stat b { color: #f2ead8; font-family: var(--serif); font-size: 13px; }
.cs-stat .cs-pct { color: var(--muted); font-size: 11px; font-family: inherit; }
.cs-bag { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cs-bag-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cs-bag-head .win-label { margin: 0; }
.cs-bag .grid { padding: 4px; border-radius: 6px; border: 1px solid transparent; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
#tooltip .tt-compare { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
#tooltip .tt-cmp-head { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
#tooltip .tt-up { color: #5ae65a; }
#tooltip .tt-down { color: #ff6a5a; }
#tooltip .tt-same { color: var(--muted); font-size: 12px; }
#tooltip .tt-hint { margin-top: 6px; font-size: 11px; color: #b8a878; font-style: italic; }
@media (max-width: 900px) { .cs-body { flex-direction: column; } .cs-left { flex-basis: auto; } }

/* ---------------------------------------------------------------- Character creator */
#creator { position: fixed; inset: 0; z-index: 70; opacity: 0; transition: opacity 0.6s ease; font-family: var(--sans); color: var(--text); }
#creator.in { opacity: 1; }
#creator.leaving { opacity: 0; transition-duration: 0.45s; }
#cr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; z-index: 1; }
#cr-canvas.turning { cursor: grabbing; }
.cr-shade { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 42% 60% at 52% 55%, rgba(40, 30, 18, 0.35), rgba(8, 6, 10, 0.88) 75%), linear-gradient(rgba(6, 5, 8, 0.4), rgba(6, 5, 8, 0.75)); backdrop-filter: blur(3px); }
.cr-top { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); z-index: 3; text-align: center; pointer-events: none; }
.cr-kicker { font-family: var(--serif); font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase; color: #c9a76a; }
.cr-name { font-family: var(--serif); font-weight: 700; font-size: 44px; letter-spacing: 0.06em; color: var(--gold); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 180, 60, 0.25); }
.cr-summary { font-size: 16px; color: #e8dcc0; margin-top: -2px; letter-spacing: 0.04em; text-shadow: 0 1px 6px #000; }
.cr-left, .cr-right { position: absolute; z-index: 3; top: 104px; bottom: 96px; display: flex; flex-direction: column; }
.cr-left { left: 28px; width: 400px; }
.cr-right { right: 28px; width: 340px; padding: 18px 20px; overflow-y: auto; scrollbar-width: thin; }
.cr-steps { display: flex; border-bottom: 1px solid #4a3a1a; }
.cr-step { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 600 13px var(--serif); padding: 12px 4px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: color 0.15s, border-color 0.15s; }
.cr-step span { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #6b5424; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.cr-step:hover { color: #efe0b8; }
.cr-step.on { color: var(--gold); border-bottom-color: var(--gold); }
.cr-step.on span { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.cr-step.done span { background: rgba(201, 167, 106, 0.25); color: #efe0b8; }
.cr-page { flex: 1; overflow-y: auto; padding: 14px 18px 18px; scrollbar-width: thin; }
.cr-sec { margin-bottom: 16px; }
.cr-sec h3 { margin: 0 0 8px; font: 600 12px var(--serif); letter-spacing: 0.18em; text-transform: uppercase; color: #c9a76a; }
.cr-swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.cr-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.6); background: var(--c); cursor: pointer; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 0.12s, box-shadow 0.12s; }
.cr-sw:hover { transform: scale(1.1); }
.cr-sw.on { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(255, 209, 0, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.35); transform: scale(1.1); }
.cr-sw.auto { background: linear-gradient(135deg, #3a2e1e, #6b5424); color: #efe0b8; font: 700 12px var(--serif); }
.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-chip { background: rgba(0, 0, 0, 0.4); border: 1px solid #4a3a1a; border-radius: 16px; padding: 6px 13px; color: #e8dcc0; font: 14px var(--sans); cursor: pointer; transition: all 0.12s; }
.cr-chip:hover { border-color: #8a6d2a; color: #fff; }
.cr-chip.on { background: rgba(255, 209, 0, 0.14); border-color: var(--gold); color: var(--gold); }
.cr-slider { margin: 6px 0 10px; }
.cr-lab { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.cr-range { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.cr-range input { flex: 1; accent-color: var(--gold); }
.cr-classes { display: flex; flex-direction: column; gap: 10px; }
.cr-class { text-align: left; background: rgba(0, 0, 0, 0.4); border: 1px solid #4a3a1a; border-radius: 8px; padding: 14px 16px; cursor: pointer; color: #e8dcc0; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; transition: all 0.15s; }
.cr-class b { font: 700 20px var(--serif); color: #f6ead0; }
.cr-class em { font-style: normal; font-size: 13px; color: #c9a76a; align-self: center; }
.cr-class span { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.cr-class:hover { border-color: #8a6d2a; }
.cr-class.on { border-color: var(--gold); background: linear-gradient(90deg, rgba(255, 209, 0, 0.12), rgba(0, 0, 0, 0.4)); box-shadow: 0 0 16px rgba(255, 209, 0, 0.18); }
.cr-class.on b { color: var(--gold); }
.cr-note, .cr-hint { font-size: 13px; color: var(--muted); line-height: 1.4; }
.cr-note { margin-top: 14px; }
.cr-hint { margin-top: 6px; }
.cr-outfits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.cr-outfit { background: rgba(0, 0, 0, 0.4); border: 1px solid #4a3a1a; border-radius: 6px; padding: 8px 6px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #e8dcc0; font: 13px var(--sans); }
.cr-outfit i { display: block; width: 44px; height: 7px; border-radius: 2px; }
.cr-outfit span { margin-top: 3px; }
.cr-outfit.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgba(255, 209, 0, 0.2); }
.cr-origins { display: flex; flex-direction: column; gap: 8px; }
.cr-origin { text-align: left; background: rgba(0, 0, 0, 0.4); border: 1px solid #4a3a1a; border-radius: 7px; padding: 10px 14px; cursor: pointer; color: #e8dcc0; }
.cr-origin b { display: block; font: 700 15px var(--serif); color: #f6ead0; margin-bottom: 2px; }
.cr-origin span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.cr-origin.on { border-color: var(--gold); background: linear-gradient(90deg, rgba(255, 209, 0, 0.12), rgba(0, 0, 0, 0.4)); }
.cr-origin.on b { color: var(--gold); }
.cr-cls-name { font: 700 30px var(--serif); color: var(--gold); letter-spacing: 0.04em; }
.cr-cls-role { font: 600 12px var(--serif); letter-spacing: 0.24em; text-transform: uppercase; color: #c9a76a; }
.cr-cls-line { font-size: 16px; color: #f2e8d0; font-style: italic; margin: 10px 0 12px; line-height: 1.35; }
.cr-cls-text { font-size: 14px; line-height: 1.45; color: #d8ccb0; }
.cr-abils { display: flex; flex-direction: column; gap: 8px; }
.cr-card-h { margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid rgba(107, 84, 36, 0.5); font-family: var(--sans); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: #c9a76a; }
.cr-abil { display: flex; gap: 10px; align-items: center; }
.cr-abil img { width: 38px; height: 38px; border-radius: 6px; border: 1px solid #6b5424; flex: none; }
.cr-abil b { display: block; font: 600 14px var(--serif); color: #f6ead0; }
.cr-abil span { font-size: 12.5px; color: var(--muted); }
.cr-turn { position: absolute; z-index: 3; left: 50%; bottom: 104px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(232, 216, 170, 0.55); }
.cr-bottom { position: absolute; z-index: 3; left: 28px; right: 28px; bottom: 24px; display: flex; gap: 10px; align-items: center; }
.cr-grow { flex: 1; }
#cr-next { min-width: 280px; width: auto; flex: none; margin: 0; }
#creator button { font-family: var(--sans); }
#creator .cr-class b, #creator .cr-origin b, #creator .cr-step { font-family: var(--serif); }
.cr-bottom .btn { margin: 0; }
@media (max-width: 1100px) { .cr-right { display: none; } .cr-left { width: 360px; } }
.cr-bill-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: #e8dcc0; padding: 3px 0; border-bottom: 1px dotted rgba(107, 84, 36, 0.45); }
.cr-bill-row b { color: #f6ead0; font-weight: 600; }
.cr-bill-total { display: flex; justify-content: space-between; margin-top: 8px; font: 700 17px var(--serif); color: var(--gold); }
.cr-bill-purse { margin-top: 4px; font-size: 13px; color: var(--muted); text-align: right; }
.cr-bill-purse.short { color: #ff8a70; }
.cr-prices summary { cursor: pointer; margin-top: 14px; font-size: 13px; color: #c9a76a; }
.cr-prices .cr-bill-row { font-size: 12.5px; color: #cfc2a4; }
#cr-keep { min-width: 260px; width: auto; flex: none; margin: 0; }
#cr-keep[disabled] { opacity: 0.55; cursor: not-allowed; }
/* stat points in the character sheet */
.cs-points { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(107, 84, 36, 0.45); }
.cs-pt-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.cs-pt-head .win-label { margin: 0; }
.cs-pt-left { font-size: 12px; color: var(--muted); }
.cs-pt-left.some { color: var(--gold); text-shadow: 0 0 6px rgba(255, 209, 0, 0.5); }
.cs-pt { display: grid; grid-template-columns: 76px 28px 1fr 30px; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cs-pt b { color: #f2ead8; font-family: var(--serif); text-align: right; }
.cs-pt-e { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-pt-add { padding: 0 !important; width: 26px; height: 22px; line-height: 20px; }

/* ================================================================== The skin */
/* Grey stone and bronze in hard pixels, after the old online RPGs: stone
   panels with a bevelled frame, bronze round the portraits and the target,
   chunky bevelled bars and slots, pixel lettering. The textures are painted
   at start-up (js/uiskin.js) into the --ui-* variables. Frames are drawn at
   twice their texels (slice 6, width 12px), small ones at one (6px). */
:root {
  --sans: 'VT323', 'Courier New', monospace;
  --serif: 'VT323', 'Courier New', monospace;
  --display: 'Cinzel', Georgia, serif;
  --gold: #f2c95a;
  --gold-dim: #b08a3a;
  --text: #ece6d4;
  --muted: #b6ae98;
  --stone-ink: #f4eedc;
}
html { font-size-adjust: 0.56; }
* { image-rendering: pixelated; }
.islot img { image-rendering: pixelated; }
/* the big display lettering stays a carved serif */
.logo, .logo-sub, #zone-text .big, #levelup .lv, .b-title, #proc-alert, .d-title, #travel .msg { font-family: var(--display); font-size-adjust: none; }

/* -- stone panels, windows, buttons -- */
.panel, .win, #death, #banner, #invite-box, .login-card {
  background: linear-gradient(rgba(24, 22, 18, 0.35), rgba(24, 22, 18, 0.35)), var(--ui-stone) 0 0 / 128px;
  border: 12px solid transparent;
  border-image: var(--ui-frame-stone) 6 / 12px / 0 repeat;
  border-radius: 0;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
  backdrop-filter: none;
  color: var(--stone-ink);
  text-shadow: 1px 1px 0 #000;
}
.qd-head { border-bottom: 2px solid rgba(0, 0, 0, 0.45); box-shadow: 0 2px 0 rgba(255, 255, 255, 0.12); }
.qd-foot { border-top: 2px solid rgba(0, 0, 0, 0.45); }
.qd-body { background: rgba(10, 9, 8, 0.45); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.1); }
.btn, #item-menu button, .map-tools button, .map-tabs button, .mp-acts button {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  color: #f8e8b0;
  background: var(--ui-stone) 0 0 / 128px;
  border: 6px solid transparent;
  border-image: var(--ui-frame-stone) 6 / 6px / 0 repeat;
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  text-shadow: 1px 1px 0 #000;
  padding: 4px 14px;
}
.btn:active { filter: brightness(0.85); transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4); }
.btn.primary { border-image: var(--ui-frame-bronze) 6 / 6px / 0 repeat; color: #fff2c0; background: linear-gradient(rgba(120, 40, 20, 0.55), rgba(120, 40, 20, 0.55)), var(--ui-stone) 0 0 / 128px; }
.btn.big { font-size: 24px; padding: 6px 20px; }
#name, #password, #chat-input, .trade-gold input, .mod-col input {
  font-family: var(--sans);
  font-size: 18px;
  color: #f4eedc;
  background: rgba(14, 13, 11, 0.85);
  border: 0;
  border-radius: 0;
  box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60;
  outline: none;
}
.x, .win .x, #quest-log .x { color: #e8d8a8; text-shadow: 1px 1px 0 #000; font-family: var(--sans); }

/* -- portraits: round, ringed in bronze, a stone badge for the level -- */
.portrait-wrap canvas, .t-portrait, .pm-portrait canvas {
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #1e1406, 0 0 0 4px #f0cc6a, 0 0 0 7px #b8892e, 0 0 0 9px #5e3e10, 0 0 0 10px #000, 4px 5px 0 9px rgba(0, 0, 0, 0.35);
}
.pm-portrait canvas { box-shadow: 0 0 0 1px #1e1406, 0 0 0 3px #d8d2c2, 0 0 0 5px #8a867a, 0 0 0 6px #000; }
#target-frame.elite .t-portrait { box-shadow: 0 0 0 2px #1e1406, 0 0 0 4px #fff0a0, 0 0 0 7px #f0c040, 0 0 0 9px #8a5a10, 0 0 0 10px #000, 0 0 0 14px rgba(255, 200, 60, 0.35); }
.lvl-badge, .pm-lvl {
  background: var(--ui-stone) 0 0 / 64px;
  border: 0;
  box-shadow: 0 0 0 2px #1a1916, inset 2px 2px 0 rgba(255, 255, 255, 0.45), inset -2px -2px 0 rgba(0, 0, 0, 0.5), 0 0 0 3px #000;
  color: #fff4d0;
  font-family: var(--sans);
  font-size: 18px;
  text-shadow: 1px 1px 0 #000;
}
.lvl-badge { width: 28px; height: 28px; bottom: -8px; left: -8px; }
#target-frame .lvl-badge { right: -8px; }

/* -- the frames beside the portraits: stone for you, bronze for your target -- */
.uf-body, .pm-body {
  background: var(--ui-stone) 0 0 / 128px;
  border: 12px solid transparent;
  border-image: var(--ui-frame-stone) 6 / 12px / 0 repeat;
  border-radius: 0;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
  padding: 0 4px 2px 10px;
}
#target-frame .uf-body { border-image: var(--ui-frame-bronze) 6 / 12px / 0 repeat; padding: 0 10px 2px 4px; }
.pm-body { border-width: 6px; border-image-width: 6px; padding: 0 4px 2px 10px; background-size: 64px; }
.uf-name { font-size: 22px; color: #2a2620; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35); margin-bottom: 2px; }
#target-frame .uf-name { color: #2a1406; }
#player-frame.combat .uf-name { color: #8a1408; }
.pm-name { font-size: 17px; color: #22201c; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); }
.pm-lead { color: #7a4a00; }

/* -- bars: a dark trough, bevelled, the fill lit along its top -- */
.bar, .pbar, .pcast, #xp-bar, .cb-bar, .cs-bar {
  background: #14120f;
  border: 0;
  border-radius: 0;
  box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px #000;
  overflow: hidden;
}
.bar { height: 16px; margin-bottom: 3px; }
.bar.mana { height: 13px; }
.bar .fill, .bar .absorb, #xp-bar .fill, .cb-bar .fill { top: 2px; bottom: 2px; left: 2px; }
.bar.hp .fill, #target-frame .bar.hp .fill, #target-frame.friendly .bar.hp .fill, .pfill, .cs-bar.hp .cs-fill {
  background: var(--ui-grain), linear-gradient(#ff8a7a 0 2px, #d22a1c 2px calc(100% - 2px), #6e0e08 calc(100% - 2px));
}
.bar.mana .fill, .cs-bar.mana .cs-fill { background: var(--ui-grain), linear-gradient(#8ab8ff 0 2px, #2a62d8 2px calc(100% - 2px), #0e2462 calc(100% - 2px)); }
.bar.stamina .fill, .cs-bar.stam .cs-fill { background: var(--ui-grain), linear-gradient(#ffe890 0 2px, #e0a820 2px calc(100% - 2px), #6e4a00 calc(100% - 2px)) !important; }
/* out of breath: the stamina bar flickers till it is back (player.js) */
.bar.stamina.spent { animation: spent-flicker 0.5s steps(2, jump-none) infinite; }
@keyframes spent-flicker { from { filter: none; } to { filter: brightness(0.55) saturate(0.4); } }
#xp-bar .fill, .cs-bar.xp .cs-fill { background: var(--ui-grain), linear-gradient(#e0b0ff 0 2px, #8a3adf 2px calc(100% - 2px), #3a1270 calc(100% - 2px)); }
.cb-bar .fill { background: var(--ui-grain), linear-gradient(#fff0a0 0 2px, #e0a010 2px calc(100% - 2px), #6a4400 calc(100% - 2px)); }
#cast-bar.channel .cb-bar .fill { background: var(--ui-grain), linear-gradient(#c0ffb0 0 2px, #3ac03a 2px calc(100% - 2px), #145a14 calc(100% - 2px)); }
.pcfill { background: var(--ui-grain), linear-gradient(#ffe0a0 0 1px, #ffb030 1px); }
.bar .txt, #xp-bar .txt, .cb-bar .name, .cb-bar .time, .cs-bar-t { font-family: var(--sans); font-weight: 400; font-size: 16px; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.bar.mana .txt, .pm-hp .txt, #xp-bar .txt { font-size: 14px; }
#xp-bar { height: 14px; }
/* the focus skill, at the bar's right end */
#xp-bar .focus { position: absolute; top: 0; bottom: 0; right: 8px; display: flex; align-items: center; font-family: var(--sans); font-size: 13px; color: #ffe9a8; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; cursor: help; }
.cb-bar { height: 22px; }
.cb-icon { border: 0; box-shadow: 0 0 0 2px #000, 0 0 0 4px #a8a498, 0 0 0 5px #000; }

/* -- the action bar: free-standing stone slots, the key in the corner -- */
#action-bar { background: none; border: 0; box-shadow: none; padding: 0; gap: 6px; }
.slot, .islot {
  border: 6px solid transparent;
  border-image: var(--ui-frame-stone) 6 / 6px / 0 repeat;
  border-radius: 0;
  background: #1a1815;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.slot { width: 58px; height: 58px; }
.slot .icon, .slot .cd { border-radius: 0; }
.slot .key { font-family: var(--sans); font-size: 18px; font-weight: 400; color: #f4eedc; top: 0; right: 2px; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
.slot .cdt { font-family: var(--sans); font-weight: 400; font-size: 26px; }
.slot .mb, .islot .qty { font-family: var(--sans); font-size: 15px; font-weight: 400; background: none; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
/* food and potions on the hotbar: the item's picture and how many are left */
.slot.item .icon { inset: 4px; background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; }
.slot .count { position: absolute; left: 3px; bottom: 0; font-family: var(--sans); font-size: 15px; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.slot.item.locked .lock { align-items: center; padding-bottom: 0; font-family: var(--sans); font-size: 14px; font-weight: 400; color: #e8d8a8; }
#action-bar.can-take .slot { box-shadow: 0 0 0 2px #f0cc6a, 0 0 10px rgba(255, 209, 0, 0.45); }
.slot:hover, .islot:not(.empty):hover { border-image: var(--ui-frame-bronze) 6 / 6px / 0 repeat; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); }
.slot.active { border-image: var(--ui-frame-bronze) 6 / 6px / 0 repeat; box-shadow: 0 0 0 2px #fff4a0, 3px 3px 0 rgba(0, 0, 0, 0.4); }
.slot.proc { border-image: var(--ui-frame-bronze) 6 / 6px / 0 repeat; }
.islot { width: 48px; height: 48px; }
.islot.empty { opacity: 0.7; }
.aura { border-radius: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px #a8a498; }
.aura.debuff { box-shadow: 0 0 0 2px #000, 0 0 0 3px #d02a1a; }
.aura span { font-family: var(--sans); font-size: 15px; font-weight: 400; }

/* -- chat: a stone panel, stone tabs (the open one in bronze) -- */
#chat-tabs { gap: 3px; margin-bottom: 0; }
#chat-tabs button {
  font: 17px var(--sans);
  color: #2a2620;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35);
  background: var(--ui-stone) 0 0 / 64px;
  border: 4px solid transparent;
  border-image: var(--ui-frame-stone) 6 / 4px / 0 repeat;
  border-radius: 0;
  padding: 0 8px;
}
#chat-tabs button.on { color: #2a1406; border-image: var(--ui-frame-bronze) 6 / 4px / 0 repeat; background: linear-gradient(rgba(240, 200, 90, 0.45), rgba(240, 200, 90, 0.45)), var(--ui-stone) 0 0 / 64px; }
#chat-log {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.15;
  padding: 6px 8px;
  max-height: 190px;
  background: linear-gradient(rgba(16, 15, 13, 0.66), rgba(16, 15, 13, 0.66)), var(--ui-stone) 0 0 / 128px;
  border: 8px solid transparent;
  border-image: var(--ui-frame-stone) 6 / 8px / 0 repeat;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
}
#chat-log:empty { display: none; }
#chat-log .line.old { opacity: 0.6; }
#chat-input { margin-top: 4px; padding: 4px 8px; }

/* -- the minimap: a ring of bronze, its name on a stone plate -- */
#minimap { border: 0; box-shadow: 0 0 0 2px #1e1406, 0 0 0 4px #f0cc6a, 0 0 0 7px #b8892e, 0 0 0 9px #5e3e10, 0 0 0 10px #000, 5px 6px 0 10px rgba(0, 0, 0, 0.35); }
#zone-name {
  font-family: var(--sans);
  font-size: 20px;
  color: #2a2620;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35);
  background: var(--ui-stone) 0 0 / 64px;
  border: 6px solid transparent;
  border-image: var(--ui-frame-stone) 6 / 6px / 0 repeat;
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  margin-bottom: 12px;
}
#realm { font-family: var(--sans); font-size: 15px; margin-top: 12px; }
#money {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: #fff0b0;
  background: var(--ui-stone-dark) 0 0 / 64px;
  border: 6px solid transparent;
  border-image: var(--ui-frame-bronze) 6 / 6px / 0 repeat;
  border-radius: 0;
  padding: 0 8px;
  text-shadow: 1px 1px 0 #000;
}

/* -- tooltips and menus: dark stone in a bronze frame -- */
#tooltip, #item-menu, #map-tip {
  background: linear-gradient(rgba(10, 9, 8, 0.55), rgba(10, 9, 8, 0.55)), var(--ui-stone-dark) 0 0 / 64px;
  border: 6px solid transparent;
  border-image: var(--ui-frame-bronze) 6 / 6px / 0 repeat;
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  font-family: var(--sans);
  font-size: 17px;
  text-shadow: 1px 1px 0 #000;
}
#tooltip .tt-name { font-size: 20px; }

/* -- names over heads: pixel lettering on a dark plate -- */
.pname {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 22px;
  color: #ff5a40;
  padding: 0 6px;
  background: rgba(0, 0, 0, 0.62);
  text-shadow: 1px 1px 0 #000;
}
.plate.npc .pname { color: #7aff5a; }
.plate.friend .pname, .plate.party .pname { color: #8ac8ff; }
.ptitle { font-family: var(--sans); font-size: 16px; display: inline-block; padding: 0 5px; background: rgba(0, 0, 0, 0.5); }
.plate.targeted .pname { font-size: 24px; box-shadow: 0 0 0 2px #f0cc6a; }
.plate.targeted .pbar { box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px #f0cc6a; }
.pbar { height: 9px; }
.pmark { font-family: var(--sans); font-size: 44px; }
.bubble {
  font: 18px/1.1 var(--sans);
  border-radius: 0;
  background: #f4eedc;
  box-shadow: 0 0 0 2px #2a2620, 3px 3px 0 2px rgba(0, 0, 0, 0.35);
}
.bubble.party { background: #d8e4ff; }
.fct { font-family: var(--sans); font-weight: 400; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }

/* -- the quest tracker and messages: pixel lettering, hard shadows -- */
#quest-tracker, #error-text, #msg-text, #hint { font-family: var(--sans); text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.qt-head { font-size: 20px; }
.qt-title { font-size: 19px; }
.qt-line { font-size: 17px; }
#hint { border-radius: 0; background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 2px #000, 0 0 0 4px #a8a498; font-size: 18px; }

/* -- wells inside the windows: dark stone sunk in a bevel -- */
.cs-view, .cs-stats, .map-body, .qd-quest, .mod-row, .mod-player, .help-grid .tip, .cr-class, .cr-origin, .cr-outfit, .cr-chip, .cr-step span, .cs-bag .grid {
  border: 0;
  border-radius: 0;
  background: rgba(12, 11, 9, 0.55);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12);
}
/* (the light behind the hero reaches down to the feet, so dark armour, Ashplate's
   black legs, stands out against it as well as the head does) */
.cs-view { background: radial-gradient(ellipse 80% 72% at 50% 50%, rgba(86, 80, 70, 0.72), rgba(14, 13, 11, 0.95) 88%); box-shadow: inset 3px 3px 0 #000, inset -3px -3px 0 rgba(255, 255, 255, 0.14); }
.cs-view.can-drop, .grid.can-drop { box-shadow: inset 3px 3px 0 #000, inset -3px -3px 0 rgba(255, 255, 255, 0.14), 0 0 0 3px var(--gold); }
.cs-turn, .doll-label { font-size: 14px; }
.doll-label { width: 72px; line-height: 0.9; }
.cs-stat { font-size: 16px; border-bottom: 2px dotted rgba(0, 0, 0, 0.35); }
.cs-stat b { font-size: 16px; }
.cs-bar { height: 20px; }
.cs-bar-t { font-size: 16px; line-height: 18px; }
.cs-bar.xp { height: 14px; }
.cs-bar.xp .cs-bar-t { font-size: 13px; line-height: 12px; }
.cs-fill { top: 2px; bottom: 2px; left: 2px; }
.islot.can-drop { box-shadow: 0 0 0 3px var(--gold); animation: none; }
.qd-quest:hover, .mod-row:hover, .cr-class:hover, .cr-origin:hover, .cr-outfit:hover, .cr-chip:hover { background: rgba(60, 56, 48, 0.55); }
.cr-class.on, .cr-origin.on, .cr-outfit.on, .cr-chip.on {
  background: linear-gradient(rgba(240, 200, 90, 0.16), rgba(240, 200, 90, 0.16)), rgba(12, 11, 9, 0.55);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px #f0cc6a, 0 0 0 3px #000;
}
.tag, .mod-row i { border-radius: 0; }
.mod-tog, .mod-col input, #mod-level-in, .mod-skill input { border-radius: 0; }
.cr-step { font-family: var(--sans) !important; font-size: 17px; }
.cr-step span { width: 26px; height: 26px; font-size: 16px; }
.cr-step.on span { background: #d8a838; box-shadow: inset 2px 2px 0 #fff0a0, inset -2px -2px 0 #6e4a00, 0 0 0 2px #000; }
.cr-step.on { border-bottom: 3px solid var(--gold); }
.cr-sw { border-radius: 0; border: 0; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px #000; }
.cr-sw.on { box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px #000, 0 0 0 4px #f0cc6a, 0 0 0 5px #000; transform: none; }
.cr-sw:hover { transform: none; filter: brightness(1.15); }
.cr-outfit i { border-radius: 0; }
.cr-abil img, .cr-left img { border-radius: 0; border: 0; box-shadow: 0 0 0 2px #000, 0 0 0 4px #a8a498, 0 0 0 5px #000; }
.cr-kicker, .cr-sec h3, .cr-cls-role { font-family: var(--sans); font-size: 17px; letter-spacing: 0.12em; }
.cr-class b, .cr-origin b, .cr-abil b { font-family: var(--sans) !important; font-weight: 400; }
.cr-class b { font-size: 24px; }
.cr-origin b { font-size: 19px; }
.cr-abil b { font-size: 18px; }
.cr-name, .cr-cls-name { font-family: var(--display); font-size-adjust: none; }
.cr-left, .cr-right { border-radius: 0; }
.cr-shade { backdrop-filter: none; }
#use-hint, #chest-hint, #gather-hint, #fish-hint, #tommy-hint, #pet-hint, #house-hint, #farm-hint, #arena-hint, #sp-hint { border: 0; border-radius: 0; font-size: 18px; background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 2px #000, 0 0 0 4px #a8a498, 0 0 0 5px #000; }
#use-hint b, #chest-hint b, #gather-hint b, #fish-hint b, #fish-bar .fb-say b, #tommy-hint b, #pet-hint b, #house-hint b, #farm-hint b, #arena-hint b, #sp-hint b { border-radius: 0; box-shadow: inset 1px 1px 0 #fff0a0, inset -1px -1px 0 #6e4a00; }
.swatch { border-radius: 0; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.45); }

/* -- the map: a bronze-framed sheet, stone buttons -- */
#map-win .map-frame {
  background: linear-gradient(rgba(24, 22, 18, 0.35), rgba(24, 22, 18, 0.35)), var(--ui-stone) 0 0 / 128px;
  border: 12px solid transparent;
  border-image: var(--ui-frame-bronze) 6 / 12px / 0 repeat;
  border-radius: 0;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.45);
}
#map-win .map-frame::before { display: none; }
.map-title { font-family: var(--display); font-size-adjust: none; }
.map-sub, #map-win .map-foot { font-size: 17px; text-shadow: 1px 1px 0 #000; }
.map-tools button, .map-tabs button { padding: 2px 12px; }
.map-body, #map-canvas { border-radius: 0; }
.map-body { box-shadow: 0 0 0 2px #000, 0 0 0 4px #6e6a60, inset 0 0 0 2px #000; }
#map-tip b { font-family: var(--sans); font-size: 18px; }
#map-tip span, #map-tip em { font-size: 15px; }
.doll-label { white-space: nowrap; letter-spacing: 0; font-size: 13px; }
.t-portrait { background-size: cover; background-position: center; image-rendering: pixelated; }
#target-frame .uf-name { font-size: 18px; }
#target-frame .uf-body { width: 240px; }
#map-canvas { image-rendering: pixelated; }
#minimap { width: 170px; height: 170px; image-rendering: pixelated; }
#name, #password { padding: 6px 10px; height: auto; }
#chat { max-width: 32vw; }
/* the creator's small print, a size up for the pixel lettering */
.cr-class span, .cr-origin span, .cr-note, .cr-hint, .cr-lab, .cr-cls-text, .cr-chip, .cr-outfit { font-size: 17px; }
.cr-class em, .cr-range, .cr-abil span, .cr-turn { font-size: 16px; }
.cr-summary, .cr-cls-line { font-size: 19px; }

/* The skill trainer (trainer.js) */
.un-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dotted rgba(107, 84, 36, 0.4); }
.un-row .un-names { font-size: 13px; }
.un-row .btn { flex: none; }
/* a skill's trainer */
.tr-rank { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.tr-rank b { flex: none; font-family: var(--serif); color: var(--gold); }
.tr-rank .cs-bar { flex: 1; }
.tr-act { margin: 4px 0 10px; }
.tr-next { font-size: 13px; }
.tt-req { margin-top: 6px; color: #c8bca0; }

/* The skills window (skillwin.js) */
#skills-win { left: 50%; transform: translateX(-50%); top: 8%; width: 760px; max-width: calc(100vw - 32px); max-height: 84vh; }
.sk-tabs { display: flex; gap: 6px; padding: 10px 14px 0; }
.sk-tab { position: relative; flex: 1; padding: 6px 10px; background: rgba(12, 11, 9, 0.55); border: 0; color: #e8d8a8; font-family: var(--sans); font-size: 17px; cursor: pointer; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12); }
.sk-tab span { color: var(--muted); margin-left: 4px; }
.sk-tab i { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-style: normal; background: #d8a838; color: #000; padding: 0 6px; box-shadow: 0 0 0 2px #000; }
.sk-tab.on { background: linear-gradient(rgba(240, 200, 90, 0.16), rgba(240, 200, 90, 0.16)), rgba(12, 11, 9, 0.55); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px #f0cc6a, 0 0 0 3px #000; }
.sk-head { padding: 10px 14px 0; }
.sk-points { margin-top: 6px; color: var(--muted); font-size: 15px; }
.sk-points b { color: var(--gold); font-size: 17px; }
.sk-tree { display: flex; gap: 10px; padding: 10px 14px; overflow-y: auto; }
.sk-path { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sk-node { display: flex; align-items: center; gap: 8px; padding: 5px; background: rgba(12, 11, 9, 0.55); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12); cursor: default; }
.sk-icon { flex: none; width: 36px; height: 36px; background-size: cover; image-rendering: pixelated; box-shadow: 0 0 0 2px #000; }
.sk-text { min-width: 0; display: flex; flex-direction: column; }
.sk-text b { color: #f2ead8; font-size: 15px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-text span { color: var(--muted); font-size: 12px; }
.sk-node.known .sk-icon { box-shadow: 0 0 0 2px #000, 0 0 0 4px #6ac060; }
.sk-node.ready { cursor: pointer; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px #f0cc6a; }
.sk-node.ready:hover { background: rgba(60, 56, 48, 0.55); }
.sk-node.locked .sk-icon, .sk-node.planned .sk-icon { filter: grayscale(1) brightness(0.45); }
.sk-node.locked .sk-text b, .sk-node.planned .sk-text b { color: #a89c80; }
.sk-node.planned { opacity: 0.55; }
.sk-book { padding: 0 14px 4px; }
.sk-book .muted { margin: 0; font-size: 14px; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-chip { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; background: rgba(12, 11, 9, 0.55); border: 0; color: #a89c80; font-family: var(--sans); font-size: 15px; cursor: pointer; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12); }
.sk-chip span { width: 22px; height: 22px; background-size: cover; image-rendering: pixelated; filter: grayscale(1) brightness(0.6); }
.sk-chip.on { color: #f2ead8; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px #f0cc6a; }
.sk-chip.on span { filter: none; }
@media (max-width: 640px) { .sk-tree { flex-direction: column; } }
/* Known Skills: drag onto the hotbar */
.sk-tab.known { flex: 1.3; }
.sk-tab.all { flex: 1.2; }
/* All Skills: a row each */
.sk-tree.sk-all { flex-direction: column; gap: 4px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 5px 8px; background: rgba(12, 11, 9, 0.4); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.08); }
.sk-row.focus { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px #f0cc6a; }
.sk-row.off { opacity: 0.7; }
/* Life: the hero's own level, at the top of All Skills */
.sk-row.life { background: rgba(40, 30, 12, 0.55); margin-bottom: 4px; }
.sk-row.life .sk-row-n b { color: #ffd100; }
.sk-row-n { flex: none; width: 170px; display: flex; align-items: baseline; gap: 6px; }
.sk-row-n b { font-family: var(--serif); color: #f2e2b0; font-size: 16px; }
.sk-row-n span { color: var(--gold); font-size: 16px; }
.sk-row-n i { font-style: normal; font-size: 12px; background: #d8a838; color: #000; padding: 0 5px; box-shadow: 0 0 0 1px #000; }
.sk-row-b { flex: 1; min-width: 0; }
.sk-row-t { font-size: 13px; color: var(--muted); }
.sk-row-b .sk-row-t { margin-top: 2px; }
.sk-focus { color: var(--gold); }
.sk-node.drag { cursor: grab; }
.sk-node.drag:hover { background: rgba(60, 56, 48, 0.55); }
.sk-node.placed .sk-text span { color: #9ad08a; }
.sk-node.passive .sk-icon { filter: saturate(0.5) brightness(0.75); }
.sk-node.passive .sk-text b { color: #c8bca0; }
/* twelve slots: a little smaller on narrow screens, and the bar kept clear of the chat */
:root { --slot: clamp(44px, calc((100vw - 880px) / 12.5), 58px); }
.slot { width: var(--slot); height: var(--slot); }
/* (the middle of the screen in the bar's own units: interface size, --ui, scales the rest) */
#bottom { left: max(calc(50vw / var(--ui)), calc(min(400px, 32vw) + 30px + (12 * var(--slot) + 66px) / 2)); }
.slot.locked .lock { align-items: flex-end; padding-bottom: 1px; font-family: var(--sans); font-size: 14px; font-weight: 400; color: #e8d8a8; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
.slot.empty { cursor: default; background: rgba(26, 24, 21, 0.55); }
.slot.empty .key { opacity: 0.45; }
.slot.drop { border-image: var(--ui-frame-bronze) 6 / 6px / 0 repeat; box-shadow: 0 0 0 2px #f0cc6a, 0 0 12px rgba(255, 209, 0, 0.6); }
body:has(#skills-win:not(.hidden)) .slot:not(.empty) { cursor: grab; }
#drag-ghost { position: fixed; z-index: 1000; width: 46px; height: 46px; margin: -23px 0 0 -23px; background-size: cover; image-rendering: pixelated; box-shadow: 0 0 0 2px #000, 0 0 0 4px #f0cc6a; pointer-events: none; opacity: 0; }
#drag-ghost.show { opacity: 0.9; }

/* The edit mode (editor.js, ?edit on a local server) */
.editor-toggle { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--panel); color: var(--gold); border: 2px solid var(--panel-edge); font-family: var(--serif); font-size: 13px; padding: 4px 12px; cursor: pointer; }
body.editing .editor-toggle { display: none; }
body.editing #hud, body.editing .hud, body.editing #chat, body.editing #minimap { visibility: hidden; }
.editor-panel { position: fixed; top: 10px; right: 10px; bottom: 10px; width: 300px; z-index: 70; background: var(--panel); border: 2px solid var(--panel-edge); color: #e8e0cc; font-family: var(--sans); font-size: 13px; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.editor-panel .ed-title { font-family: var(--serif); color: var(--gold); font-size: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.editor-panel .ed-dirty { font-family: var(--sans); font-size: 12px; }
.editor-panel .ed-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.editor-panel button { background: #2a2418; color: #e8e0cc; border: 1px solid var(--panel-edge); padding: 4px 8px; cursor: pointer; font-size: 12px; }
.editor-panel button.on { background: #6b5424; color: #fff2c0; }
.editor-panel button:hover { border-color: var(--gold); }
.editor-panel select, .editor-panel input { width: 100%; background: #14110c; color: #e8e0cc; border: 1px solid var(--panel-edge); padding: 4px; font-size: 12px; box-sizing: border-box; }
.editor-panel input[type=range] { padding: 0; }
.editor-panel input[type=checkbox] { width: auto; margin-right: 4px; }
.editor-panel .ed-dg-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.editor-panel .ed-dig-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.editor-panel .ed-sec[data-for=dig] { overflow-y: auto; }
.editor-panel .ed-row button.ed-dg-q { padding: 2px 6px; }
.editor-panel .ed-sec { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.editor-panel .ed-sec[data-for=place] { flex: 1; }
.editor-panel .ed-list { flex: 1; overflow-y: auto; border: 1px solid #3a3020; min-height: 120px; }
.editor-panel .ed-item { padding: 3px 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 6px; }
.editor-panel .ed-item span { color: #8a826e; font-size: 11px; }
.editor-panel .ed-item:hover, .editor-panel .ed-item.on { background: #3a3020; }
.editor-panel .ed-sel { color: #fff2c0; min-height: 2.6em; }
.editor-panel .ed-help { color: #a89e86; font-size: 11.5px; line-height: 1.35; }
.editor-panel .ed-note { color: #9fe08f; min-height: 1.3em; }
.editor-panel .ed-buttons { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.editor-panel .ed-keys { border-top: 1px solid #3a3020; padding-top: 6px; }
/* the people and creatures (editliving.js): the two tabs's lists and forms */
.editor-panel .ed-sec.ed-mobs { flex: 1; }
.editor-panel .ed-sec.ed-people { flex: 1; overflow-y: auto; padding-right: 2px; }
.editor-panel .ed-spawn { max-height: 46vh; overflow-y: auto; }
/* the land shaping (editshape.js) */
.editor-panel .ed-sec.ed-shape { flex: 1; overflow-y: auto; padding-right: 2px; }
.editor-panel .ed-check input[type=number] { width: 64px; }
.editor-panel .ed-check button { padding: 2px 6px; margin-left: auto; }
.editor-panel .ed-pair b { min-width: 2em; text-align: right; }
.editor-panel .ed-form { display: flex; flex-direction: column; gap: 4px; }
.editor-panel .ed-form label { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 6px; font-size: 12px; color: #c8bea6; }
.editor-panel .ed-form label.ed-check, .editor-panel label.ed-check { display: flex; align-items: center; gap: 6px; }
.editor-panel .ed-check input[type=checkbox] { width: auto; }
.editor-panel .ed-check input[type=color] { width: 48px; margin-left: auto; }
.editor-panel .ed-pair { display: flex; gap: 4px; }
.editor-panel textarea { width: 100%; background: #14110c; color: #e8e0cc; border: 1px solid var(--panel-edge); padding: 4px; font-size: 12px; box-sizing: border-box; resize: vertical; font-family: inherit; }
.editor-panel input[type=color] { padding: 0 2px; height: 22px; }
.editor-panel .ed-look { border-top: 1px solid #3a3020; padding-top: 4px; }
.editor-panel .ed-person, .editor-panel .ed-spawn { display: flex; flex-direction: column; gap: 6px; }

/* PvP (October 2026, as the 2D game): the skull on the minimap's rim, bone
   white while friendly, its eyes glowing red while unfriendly; unfriendly
   players' names red with a skull, wanted ones !WANTED! over them, and those
   you may attack now with their health over them. (--skull: ui.js) */
#pvp-toggle { position: absolute; left: -16px; top: 178px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto;
  background: radial-gradient(circle at 50% 40%, #3a2c1c, #140c06); box-shadow: 0 0 0 2px #1e1406, 0 0 0 4px #f0cc6a, 0 0 0 6px #5e3e10, 0 0 0 7px #000; }
#pvp-toggle canvas { display: block; margin: 0 auto; width: 32px; height: 32px; image-rendering: pixelated; }
#pvp-toggle:hover { filter: brightness(1.2); }
#pvp-toggle.on { box-shadow: 0 0 0 2px #1e1406, 0 0 0 4px #ff5a5a, 0 0 0 6px #7a1010, 0 0 0 7px #000, 0 0 12px 6px rgba(255, 42, 42, 0.45); }
#pvp-toggle.on canvas { filter: drop-shadow(0 0 3px rgba(255, 42, 42, 0.85)); }
.plate.friend.unfriendly .pname { color: #ff5a5a; }
.plate.friend.guildmate .pname { color: #f0c860; }
/* (an enemy in a guild war: orange, over the skull's red; siege.js) */
.plate.friend.enemy .pname { color: #ff9a2a; }
.plate.friend.ss { opacity: 0.55; }
.plate.friend.unfriendly .pname::before, #player-frame.pvp #pf-name::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -2px; background: var(--skull) center / contain no-repeat; image-rendering: pixelated; }
.plate.friend.hostile .pbar { display: block; }
.pmark.wanted { color: #ff2a2a; font-size: 22px; line-height: 22px; transform: translateY(-24px); text-shadow: 0 0 6px #000, 1px 1px 0 #000, -1px -1px 0 #000; animation: none; }
#player-frame.pvp #pf-name { color: #ff5a5a; }
#player-frame.wanted #pf-name::after { content: ' !WANTED!'; color: #ff2a2a; font-size: 0.85em; }

/* Settings (October 2026): the cog on the minimap's rim, the skull's mirror
   (the map is 170 across: its centre 85 in), and its window of key binds, mouse, sound and display. */
:root { --ui: 1; }
#settings-cog { position: absolute; left: 146px; top: 178px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto;
  background: radial-gradient(circle at 50% 40%, #3a2c1c, #140c06); box-shadow: 0 0 0 2px #1e1406, 0 0 0 4px #f0cc6a, 0 0 0 6px #5e3e10, 0 0 0 7px #000; }
#settings-cog canvas { display: block; margin: 0 auto; width: 32px; height: 32px; image-rendering: pixelated; transition: transform 0.25s; }
#settings-cog:hover { filter: brightness(1.2); }
#settings-cog:hover canvas { transform: rotate(45deg); }
#settings-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 560px; z-index: 30; }
.set-tabs { display: flex; gap: 6px; padding: 8px 12px 0; }
.set-tabs button { font-family: var(--sans); font-weight: 400; font-size: 19px; color: #d8c8a0; background: rgba(0, 0, 0, 0.35); border: 0; padding: 3px 12px; cursor: pointer; text-shadow: 1px 1px 0 #000;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.55), inset -2px -2px 0 rgba(255, 255, 255, 0.08); }
.set-tabs button:hover { color: #f8e8b0; }
.set-tabs button.on { color: var(--gold); background: rgba(255, 209, 0, 0.12); box-shadow: inset 0 0 0 2px #a8761e; }
#set-body { margin: 8px 12px 0; flex: 1 1 auto; min-height: 0; }
.set-help { font-size: 16px; line-height: 1.2; margin: 0 0 8px; }
#settings-win .win-label { font-family: var(--sans); font-size: 19px; color: var(--gold); margin: 10px 0 4px; }
.kb-row { display: grid; grid-template-columns: 1fr 104px 104px; gap: 6px; align-items: center; padding: 2px 0; font-size: 17px; line-height: 1.1; }
.kb { font-family: var(--sans); font-weight: 400; font-size: 19px; height: 26px; color: #f8e8b0; background: rgba(14, 13, 11, 0.85); border: 0; cursor: pointer; text-shadow: 1px 1px 0 #000;
  box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb:hover { color: var(--gold); }
.kb.none { color: #6e6658; }
.kb.listen { color: #1a1206; background: var(--gold); text-shadow: none; animation: kb-wait 0.8s steps(2) infinite; }
@keyframes kb-wait { 50% { background: #b88a20; } }
.set-row { display: grid; grid-template-columns: 1fr 190px 52px; gap: 10px; align-items: center; margin: 12px 0; font-size: 18px; line-height: 1.1; }
.set-row small { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.set-row.check { grid-template-columns: 1fr auto; }
.set-row input[type='range'] { accent-color: #d8a840; width: 100%; }
.set-row input[type='checkbox'] { accent-color: #d8a840; width: 20px; height: 20px; }
.set-row output { font-size: 18px; color: var(--gold); text-align: right; }
.set-views { display: flex; gap: 6px; grid-column: span 2; justify-content: flex-end; }
.set-views .btn.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.set-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 4px; }
#set-note { color: var(--gold); font-size: 16px; line-height: 1.1; }

/* Windows taller than the screen: they stop short of it and scroll inside
   (Settings, with How to play in it, foremost), with a scroll bar in stone. (--ui: interface size;
   it scales screen heights too, so they are divided by it.) */
#settings-win .qd-body, #quest-log .qd-body, #quest-dialog .qd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#settings-win { max-width: calc((100vw - 32px) / var(--ui)); max-height: calc((100vh - 32px) / var(--ui)); }
#quest-dialog, #quest-log { max-height: calc((100vh - 360px) / var(--ui)); }
#mod-win { max-height: calc(80vh / var(--ui)); }
.panel ::-webkit-scrollbar, .panel::-webkit-scrollbar { width: 14px; height: 14px; }
.panel ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.5); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.08); }
.panel ::-webkit-scrollbar-thumb { background: var(--ui-stone) 0 0 / 64px; border: 2px solid #14110d; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.4), inset -2px -2px 0 rgba(0, 0, 0, 0.55); min-height: 30px; }
.panel ::-webkit-scrollbar-thumb:hover { background-color: #b8a070; box-shadow: inset 2px 2px 0 rgba(255, 240, 200, 0.6), inset -2px -2px 0 rgba(0, 0, 0, 0.55); }
.panel ::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { .panel, .panel * { scrollbar-color: #9a8a68 #1a1612; } }

/* Interface size (Settings): the frames, bars, chat and windows; not the
   names over heads, tooltips or menus, which sit where the cursor or the
   world puts them. */
#player-frame, #target-frame, #party-frames, #minimap-wrap, #quest-tracker, #cast-bar, #bottom, #money, #chat, #death, #banner, #hud .panel { zoom: var(--ui); }

/* Party frames (October 2026): a column under your frame and what is on
   you, portraits under yours (placed by ui.js placeParty); health, mana and
   stamina, their buffs beside them. Click to target, right-click for a menu
   (party.js), as your own frame and the target's. */
#player-frame .auras { top: calc(100% + 12px); left: 70px; }
#player-frame, #target-frame { pointer-events: auto; }
#party-frames { left: 26px; top: 150px; gap: 14px 24px; flex-wrap: wrap; align-content: flex-start; pointer-events: none; }
.pmember { pointer-events: auto; cursor: pointer; position: relative; }
.pmember:hover .pm-body { filter: brightness(1.12); }
.pmember.targeted .pm-portrait canvas { box-shadow: 0 0 0 1px #1e1406, 0 0 0 3px #fff0a0, 0 0 0 5px #d8a840, 0 0 0 6px #000; }
.pm-body { width: 210px; }
.pm-hp { height: 14px; }
.pm-hp .txt { font-size: 13px; }
.pm-mn, .pm-sp { height: 5px; margin-top: 2px; }
.pm-mn .txt, .pm-sp .txt { display: none; }
.pm-auras { display: flex; gap: 3px; margin-left: 8px; flex-wrap: wrap; max-width: 150px; }
.pm-auras .aura { width: 20px; height: 20px; }
.pm-auras .aura span { font-size: 11px; bottom: -11px; }
.pmember.far .pm-auras { opacity: 0.8; }

/* A small menu at the cursor for another player or a party member. */
#unit-menu { position: fixed; z-index: 85; display: flex; flex-direction: column; min-width: 170px; padding: 2px; pointer-events: auto;
  background: linear-gradient(rgba(10, 9, 8, 0.55), rgba(10, 9, 8, 0.55)), var(--ui-stone-dark) 0 0 / 64px; border: 6px solid transparent; border-image: var(--ui-frame-bronze) 6 / 6px / 0 repeat; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4); font-family: var(--sans); text-shadow: 1px 1px 0 #000; }
#unit-menu .um-title { color: var(--gold); font-size: 18px; padding: 2px 8px 4px; border-bottom: 2px solid rgba(0, 0, 0, 0.45); margin-bottom: 2px; white-space: nowrap; }
#unit-menu button { background: none; border: 0; color: #f2e0b0; text-align: left; padding: 4px 10px; font-family: var(--sans); font-weight: 400; font-size: 20px; cursor: pointer; text-shadow: 1px 1px 0 #000; }
#unit-menu button:hover:not(:disabled) { background: rgba(255, 209, 0, 0.14); color: var(--gold); }
#unit-menu button:disabled { color: #7a7262; cursor: default; }
#unit-menu hr { border: 0; border-top: 2px solid rgba(0, 0, 0, 0.45); margin: 3px 4px; }
.set-views .btn, .set-foot .btn { font-weight: 400; font-size: 18px; padding: 2px 12px; }
#settings-win { min-height: min(420px, calc((100vh - 32px) / var(--ui))); }

/* ---------------------------------------------------------------- Ships (ships.js) */
#ship-hint { position: absolute; left: 50%; bottom: 240px; transform: translateX(-50%); padding: 7px 16px; font: 18px var(--sans); color: #f0e2c0; background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 2px #000, 0 0 0 4px #a8a498, 0 0 0 5px #000; pointer-events: none; opacity: 0; transition: opacity 0.2s; text-shadow: 0 1px 2px #000; }
#ship-hint.on { opacity: 1; }
#ship-hint b { display: inline-block; min-width: 20px; margin-right: 6px; padding: 0 5px; color: #1a1206; background: var(--gold); text-align: center; box-shadow: inset 1px 1px 0 #fff0a0, inset -1px -1px 0 #6e4a00; }
#ship-hud { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); width: 300px; padding: 7px 10px 8px; font: 13px var(--sans); color: #f0e2c0; text-align: center; background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 2px #000, 0 0 0 4px #a8a498, 0 0 0 5px #000; pointer-events: none; opacity: 0; transition: opacity 0.2s; text-shadow: 0 1px 2px #000; }
#ship-hud.on { opacity: 1; }
#ship-hud .sh-name { font-weight: 700; font-size: 15px; color: var(--gold); margin-bottom: 4px; }
#ship-hud .sh-bar { position: relative; height: 16px; background: #1a0e0a; box-shadow: 0 0 0 1px #000; }
#ship-hud .sh-bar i { position: absolute; inset: 0 auto 0 0; background: var(--ui-grain), linear-gradient(#e0b080 0 2px, #9a6a3a 2px calc(100% - 2px), #4a2e14 calc(100% - 2px)); }
#ship-hud .sh-bar span { position: relative; font-size: 12px; font-weight: 700; line-height: 16px; }
#ship-hud .sh-line { margin-top: 4px; }
#ship-hud .sh-help { margin-top: 3px; font-size: 12px; color: #c8bca0; }
#ship-hud .sh-help:empty { display: none; }
#ship-hud .sh-gun { display: none; position: relative; margin-top: 6px; height: 8px; background: #1a1a1a; box-shadow: 0 0 0 1px #000; }
#ship-hud .sh-gun.on { display: block; }
#ship-hud .sh-gun i { position: absolute; inset: 0 auto 0 0; background: #8a6a3a; }
#ship-hud .sh-gun.ready i { background: #e0b040; }
#ship-hud .sh-gun::after { content: attr(data-target); position: absolute; top: 12px; left: 0; right: 0; color: #c8b890; font-weight: 700; }
#ship-hud .sh-gun.ready::after { color: #f0d070; }
#kraken-bar { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); padding: 6px 10px 8px; font: 13px var(--sans); color: #f0e2c0; text-align: center; background: rgba(8, 0, 4, 0.72); box-shadow: 0 0 0 2px #000, 0 0 0 4px #6a2a30, 0 0 0 5px #000; pointer-events: none; opacity: 0; transition: opacity 0.4s; text-shadow: 0 1px 2px #000; }
#kraken-bar.on { opacity: 1; }
/* (the ship's panel moves down under her bar while she is out) */
body.kraken-on #ship-hud { top: 118px; }
/* The sea serpent's bar (sea.js), as the Kraken's */
#serpent-bar { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); padding: 6px 10px 8px; font: 13px var(--sans); color: #f0e2c0; text-align: center; background: rgba(0, 8, 6, 0.72); box-shadow: 0 0 0 2px #000, 0 0 0 4px #2a6a5a, 0 0 0 5px #000; pointer-events: none; opacity: 0; transition: opacity 0.4s; text-shadow: 0 1px 2px #000; }
#serpent-bar.on { opacity: 1; }
#serpent-bar .kb-name { font-weight: 700; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: #9affd0; margin-bottom: 4px; }
#serpent-bar .kb-bar { position: relative; height: 14px; background: #04140e; box-shadow: 0 0 0 1px #000; overflow: hidden; }
#serpent-bar .kb-bar i { position: absolute; inset: 0 auto 0 0; background: var(--ui-grain), linear-gradient(#a0ffd0 0 2px, #208a6a 2px calc(100% - 2px), #084030 calc(100% - 2px)); transition: width 0.25s; }
#serpent-bar .kb-bar s { position: absolute; inset: 0 auto 0 0; background: #e0ffd0; opacity: 0.55; transition: width 0.9s 0.35s; text-decoration: none; }
#serpent-bar .kb-note { margin-top: 4px; font-size: 12px; color: #b0e0c8; min-height: 15px; }
body.kraken-on #serpent-bar { top: 104px; }
body.serpent-on #ship-hud { top: 100px; }
body.kraken-on.serpent-on #ship-hud { top: 200px; }
/* The sea's news (sea.js): the fortress's opening, the convoy */
#sea-bar { position: absolute; right: 16px; top: 250px; width: min(300px, calc(100vw - 32px)); padding: 7px 10px 8px; font: 12px var(--sans); color: #e8dcc0; background: rgba(0, 0, 0, 0.66); box-shadow: 0 0 0 2px #000, 0 0 0 4px #6a6458, 0 0 0 5px #000; pointer-events: none; opacity: 0; transition: opacity 0.3s; text-shadow: 0 1px 2px #000; }
#sea-bar.on { opacity: 1; }
#sea-bar .sb-title { font-weight: 700; font-size: 13px; color: var(--gold); margin-bottom: 2px; }
#sea-bar .sb-warn { color: #ff8a70; font-weight: 700; }
#sea-bar hr { border: 0; border-top: 1px solid #4a463e; margin: 6px 0; }
#sea-bar .sb-cap { position: relative; height: 14px; margin-top: 5px; background: #1a1612; box-shadow: 0 0 0 1px #000; }
#sea-bar .sb-cap i { position: absolute; inset: 0 auto 0 0; opacity: 0.85; }
#sea-bar .sb-cap span { position: relative; display: block; font-size: 11px; font-weight: 700; line-height: 14px; text-align: center; }
#kraken-bar .kb-name { font-weight: 700; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: #ff9a7a; margin-bottom: 4px; }
#kraken-bar .kb-bar { position: relative; height: 14px; background: #1a0408; box-shadow: 0 0 0 1px #000; overflow: hidden; }
#kraken-bar .kb-bar i { position: absolute; inset: 0 auto 0 0; background: var(--ui-grain), linear-gradient(#ff8a70 0 2px, #b0202c 2px calc(100% - 2px), #4a0810 calc(100% - 2px)); transition: width 0.25s; }
#kraken-bar .kb-bar s { position: absolute; inset: 0 auto 0 0; background: #ffd0a0; opacity: 0.55; transition: width 0.9s 0.35s; text-decoration: none; }
#kraken-bar .kb-arms { display: flex; justify-content: center; gap: 5px; margin-top: 6px; }
#kraken-bar .kb-arms b { position: relative; width: 34px; height: 6px; background: #1a0408; box-shadow: 0 0 0 1px #000; }
#kraken-bar .kb-arms b::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--hp, 100%); background: #c04050; }
#kraken-bar .kb-arms b.busy::after { background: #ff7040; }
#kraken-bar .kb-arms b.cut { opacity: 0.35; }
#kraken-bar .kb-note { margin-top: 4px; font-size: 12px; color: #e0b0a0; min-height: 15px; }

/* The Harbourmaster's yard (ships.js): your ships and mending them */
.yd-ship { margin-top: 8px; padding: 6px 8px; background: rgba(0, 0, 0, 0.28); border-radius: 4px; color: #e8dcc0; font-size: 14px; }
.yd-ship b { color: #ffe8a0; }
.yd-ship em { color: #b8a888; font-style: normal; font-size: 12px; margin-left: 4px; }
.yd-hull { display: inline-block; position: relative; width: 90px; height: 8px; margin: 0 4px 0 2px; vertical-align: middle; background: #1a0e0a; box-shadow: 0 0 0 1px #000; }
.yd-hull i { position: absolute; inset: 0 auto 0 0; background: #b07a40; }
.yd-note { margin-top: 4px; color: #c8b890; font-size: 13px; }
.yd-gold { margin-top: 10px; color: var(--gold); font-weight: 700; }

/* ---------------------------------------------------------------- A moderator's bag: its pages by tab (windows.js) */
.bag-tabs { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 6px; }
.bag-tabs:empty { display: none; }
.bag-tabs button { min-width: 26px; padding: 2px 6px; font: 700 12px var(--sans); color: #c8b890; background: rgba(0, 0, 0, 0.45); border: 1px solid #4a3a1a; cursor: pointer; }
.bag-tabs button:hover { color: #f0e2c0; border-color: var(--gold-dim); }
.bag-tabs button.on { color: #1a1206; background: var(--gold); border-color: var(--gold); }
.bag-tabs button.can-drop { box-shadow: 0 0 0 1px var(--gold-dim); }
/* (on a ship's gun: no combat arrows, only the aim) */
body.on-gun #reticle, body.on-gun #dodge-ring { display: none !important; }
body.on-gun #crosshair { display: none !important; }
/* the gun's sight: where her barrel points, as Sea of Thieves draws it (ships.js) */
#gun-sight { display: none; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid rgba(240, 230, 205, 0.85); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.45); pointer-events: none; }
#gun-sight::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(240, 230, 205, 0.95); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
body.on-gun #gun-sight { display: block; }

/* Names over what lies on the ground (ground.js, backlog #60) */
.plate.loot .pname { color: #f0d890; font-size: 12px; }
.plate.loot .ptitle, .plate.loot .pbar, .plate.loot .pcast, .plate.loot .pmark { display: none; }
/* The use key, on a quest's button (quests.js, backlog #81) */
.qd-key { display: inline-block; min-width: 14px; margin-left: 6px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font-size: 0.8em; line-height: 1.3; opacity: 0.85; text-align: center; }
/* The loot window (windows.js, backlog #80) */
#loot-win { left: 24px; top: 120px; width: 300px; }
#loot-win .win-row { justify-content: flex-end; margin-top: 8px; }

/* Games at FogHaven's gates: the fair's stalls and the tilt (minigame.js, fair.js, lists.js) */
#mg { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
#mg .mg-top { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 10px 18px 12px; text-align: center; min-width: 420px; max-width: 760px; pointer-events: auto; }
#mg .mg-title { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 18px; letter-spacing: 0.04em; }
#mg .mg-how { color: var(--muted); font-size: 14px; margin: 4px 0 6px; }
#mg .mg-how b { color: var(--text); }
#mg .mg-stat { color: var(--text); font-size: 16px; min-height: 20px; }
#mg .mg-stat b { color: var(--gold); }
#mg .mg-leave { position: absolute; right: -10px; top: -10px; padding: 3px 10px; font-size: 12px; transform: translateX(100%); }
#mg .mg-banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; text-shadow: 0 2px 10px #000, 0 0 2px #000; }
#mg .mg-banner.on { animation: mg-pop 0.35s ease-out; }
#mg .mg-big { font-family: var(--serif); font-weight: 700; font-size: 44px; color: var(--gold); letter-spacing: 0.03em; }
#mg .mg-sub { font-size: 20px; color: var(--text); margin-top: 4px; }
@keyframes mg-pop { from { transform: scale(1.35); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#mg .mg-meter { position: absolute; left: 50%; bottom: 120px; width: 360px; height: 18px; transform: translateX(-50%); background: rgba(10, 8, 14, 0.8); border: 2px solid var(--panel-edge); border-radius: 9px; overflow: visible; }
#mg .mg-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, #4a8a3a, #e8c040, #d8342a); }
#mg .mg-mark { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px #fff; }
#mg .mg-label { position: absolute; left: 0; right: 0; top: -22px; text-align: center; font-size: 13px; color: var(--muted); }
#mg .mg-bar { display: inline-block; width: 110px; height: 10px; vertical-align: middle; background: rgba(255, 255, 255, 0.12); border-radius: 5px; overflow: hidden; margin: 0 4px; }
#mg .mg-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #6ab0e8, #d8342a); }
#mg .mg-guess input { width: 90px; padding: 4px 6px; font-size: 16px; background: #1a1620; color: var(--text); border: 1px solid var(--panel-edge); border-radius: 4px; }
#mg .mg-guess .btn { padding: 4px 12px; margin-left: 6px; }
body.in-minigame #hud #crosshair, body.in-minigame #hud #reticle, body.in-minigame #action-bar, body.in-minigame #quest-tracker { display: none !important; }
body.in-minigame #game canvas { cursor: crosshair; }
.qd-quest.svc.dim { opacity: 0.55; }
#tilt-marks { position: fixed; inset: 0; pointer-events: none; z-index: 39; }
#tilt-marks .tm-point { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #ffd27a; border-radius: 50%; box-shadow: 0 0 8px rgba(255, 210, 122, 0.8); }
#tilt-marks .tm-point::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #ffd27a; border-radius: 50%; }
#tilt-marks .tm-brace { position: absolute; left: 50%; top: 62%; width: 0; height: 0; }
#tilt-marks .tm-ring { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border: 3px solid rgba(255, 255, 255, 0.7); border-radius: 50%; }
#tilt-marks .tm-brace::before { content: ''; position: absolute; left: -38px; top: -38px; width: 70px; height: 70px; border: 3px solid rgba(255, 210, 122, 0.85); border-radius: 50%; }
#tilt-marks .tm-word { position: absolute; left: -60px; width: 120px; top: 44px; text-align: center; font-family: var(--serif); font-weight: 700; color: var(--text); text-shadow: 0 1px 4px #000; letter-spacing: 0.1em; }
#tilt-marks .tm-brace.now .tm-word { color: #ffd27a; }
#tilt-marks .tm-brace.held .tm-ring, #tilt-marks .tm-brace.held::before { border-color: #9ad87a; }

/* gliding: the readout takes the place of the tips under the crosshair (glider.js) */
body.gliding #hint {
  opacity: 0;
}

/* ---------------------------------------------------------------- Pets (pets.js, petui.js, petbattle.js) */
/* the pet's frame, under yours */
#pet-frame { position: absolute; display: flex; align-items: center; cursor: pointer; }
#pet-frame .pm-portrait canvas { border-color: #c8913a; background: #2a2620; }
#pet-frame .pm-lvl { border-color: #c8913a; color: #ffe2a8; }
#pet-frame .pm-body { width: 150px; }
#pet-frame.down .pm-portrait canvas { filter: grayscale(1) brightness(0.6); }
#pet-frame.sad .pm-name { color: #8a3a1a; }
.petf-mood { display: flex; gap: 6px; margin-top: 2px; }
.petf-m { position: relative; flex: 1; height: 7px; background: #14120f; box-shadow: inset 0 0 0 1px #000; }
.petf-m::after { content: ''; position: absolute; inset: 1px auto 1px 1px; width: calc((100% - 2px) * var(--k, 1)); }
#petf-happy::after { background: linear-gradient(#ffb8d8, #e0508a); }
#petf-full::after { background: linear-gradient(#ffe0a0, #c88a2a); }
.petf-down { position: absolute; left: 4px; top: 10px; width: 40px; text-align: center; font: 700 15px var(--serif); color: #ffd27a; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; pointer-events: none; }

/* the window (J) */
#pets-win { left: 50%; transform: translateX(-50%); top: 7%; width: 760px; max-width: calc(100vw - 32px); max-height: 86vh; }
.pets-body { padding: 10px 14px 0; overflow-y: auto; min-height: 220px; }
.pets-empty { padding: 20px; font-size: 18px; line-height: 1.35; }
.pet-cards { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pet-card { display: flex; flex-direction: column; align-items: center; width: 104px; padding: 6px 4px; background: rgba(12, 11, 9, 0.55); border: 0; color: var(--text); font-family: var(--sans); cursor: pointer; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12); }
.pet-card img { width: 64px; height: 64px; image-rendering: pixelated; }
.pet-card .pc-name { font-size: 18px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.pet-card .pc-name i { color: #8ae07a; font-style: normal; font-size: 12px; vertical-align: 2px; }
.pet-card .pc-sub { font-size: 15px; }
.pet-card.on { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px #f0cc6a, 0 0 0 3px #000; }
.pet-card.down img { filter: grayscale(1) brightness(0.7); }
.pet-detail { padding: 4px 2px 8px; font-size: 18px; }
.pd-top { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.pd-top img { width: 96px; height: 96px; image-rendering: pixelated; flex: none; }
.pd-name { font-size: 26px; color: var(--gold); display: flex; align-items: center; gap: 10px; }
.pd-sub { font-size: 18px; }
.pd-stats { margin: 6px 0; font-size: 17px; color: var(--muted); }
.pd-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.pd-acts select { background: #0c0a08; color: var(--text); border: 1px solid #4a3a1a; font: 17px var(--sans); padding: 3px 6px; }
.pd-likes { font-size: 16px; margin-bottom: 6px; }
.pet-bar { height: 15px; }
.pet-bar.pet-happy .fill { background: var(--ui-grain), linear-gradient(#ffc8e0 0 2px, #d8508a 2px calc(100% - 2px), #6a1838 calc(100% - 2px)) !important; }
.pet-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 8px; }
.pet-move { font-size: 17px; line-height: 1.2; }
.pet-move b { color: #f4e2b0; }
.pet-move em { font-style: normal; color: var(--muted); font-size: 15px; }
.pet-move.locked { opacity: 0.5; }
.linkish { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.pet-book { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; }
.pb-entry { display: flex; gap: 12px; align-items: flex-start; padding: 8px; background: rgba(12, 11, 9, 0.45); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.08); font-size: 17px; }
.pb-entry img { width: 80px; height: 80px; image-rendering: pixelated; flex: none; }
.pb-entry.unknown img { filter: brightness(0) opacity(0.55); }
.pb-entry p { margin: 4px 0; }
.pb-rar { font-size: 16px; }
.pb-coats { display: flex; flex-wrap: wrap; gap: 4px; }
.pb-coat { border: 2px solid; padding: 0 6px; font-size: 15px; }
.pb-coat.unseen { color: var(--muted); opacity: 0.7; }
.pb-all { text-align: center; color: var(--gold); font-size: 22px; }
.rosette { width: 72px; height: 72px; flex: none; border-radius: 50%; background: radial-gradient(circle, #f2d27a 0 22%, #b88a2a 23% 28%, transparent 29%), repeating-conic-gradient(#3a62c8 0 10deg, #2a4a9a 10deg 20deg); box-shadow: 0 0 0 3px #000; position: relative; }
.rosette::after { content: ''; position: absolute; left: 22px; top: 52px; width: 28px; height: 30px; background: linear-gradient(90deg, #3a62c8 0 45%, transparent 45% 55%, #2a4a9a 55%); clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 80%, 50% 100%, 25% 80%, 0 100%); }
.rosette[data-sp='jackrussell'] { background: radial-gradient(circle, #f2d27a 0 22%, #b88a2a 23% 28%, transparent 29%), repeating-conic-gradient(#c83a3a 0 10deg, #8a2424 10deg 20deg); }
.rosette[data-sp='prairiedog'] { background: radial-gradient(circle, #f2d27a 0 22%, #b88a2a 23% 28%, transparent 29%), repeating-conic-gradient(#3a9a4a 0 10deg, #246a2e 10deg 20deg); }
.rosette[data-sp='mainecoon'] { background: radial-gradient(circle, #f2d27a 0 22%, #b88a2a 23% 28%, transparent 29%), repeating-conic-gradient(#e8e8f0 0 10deg, #a8b0c8 10deg 20deg); }
.rosette[data-sp='dodo'] { background: radial-gradient(circle, #f2d27a 0 22%, #b88a2a 23% 28%, transparent 29%), repeating-conic-gradient(#8a3ac8 0 10deg, #5a2490 10deg 20deg); }
.pb-entry.ros.unknown .rosette { filter: grayscale(1) brightness(0.45); }
#pet-name-in { width: 100%; background: #0c0a08; color: #fff; border: 1px solid #4a3a1a; font: 22px var(--sans); padding: 6px 10px; }

/* a pet battle: the bar at the foot of the screen */
#petbattle { left: 50%; bottom: 96px; transform: translateX(-50%); width: 720px; max-width: calc(100vw - 32px); padding: 10px 12px; z-index: 15; font-size: 18px; }
.pbt-top { display: flex; align-items: center; gap: 10px; }
.pbt-card { flex: 1; display: flex; gap: 8px; align-items: center; min-width: 0; }
.pbt-card.them { flex-direction: row-reverse; text-align: right; }
.pbt-card img { width: 56px; height: 56px; image-rendering: pixelated; flex: none; }
.pbt-card > div { flex: 1; min-width: 0; }
.pbt-name { font-size: 22px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbt-name span { color: var(--muted); font-size: 17px; }
.pbt-sub { font-size: 15px; color: var(--muted); }
.pbt-stgs { min-height: 16px; }
.pbt-stg { font-size: 14px; padding: 0 4px; margin-right: 3px; box-shadow: 0 0 0 1px #000; }
.pbt-stg.up { background: #2a5a2a; color: #c8f0b8; }
.pbt-stg.down { background: #6a2a1a; color: #ffd0b8; }
.pbt-vs { flex: none; width: 110px; text-align: center; font-family: var(--display); color: #f2d27a; font-size: 18px; display: flex; flex-direction: column; }
.pbt-vs small { font-family: var(--sans); color: var(--muted); font-size: 15px; }
.pbt-log { margin: 8px 0; min-height: 76px; font-size: 17px; line-height: 1.12; color: #ece6d4; }
.pbt-log div:last-child { color: #fff; }
.pbt-moves { display: grid; grid-template-columns: repeat(2, 1fr) auto; gap: 6px; align-items: stretch; }
.pbt-move { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 4px 10px; background: rgba(12, 11, 9, 0.6); border: 0; color: var(--text); font-family: var(--sans); cursor: pointer; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12); }
.pbt-move b { font-size: 19px; color: #f4e2b0; font-weight: normal; }
.pbt-move span { font-size: 15px; color: var(--muted); }
.pbt-move.good span { color: #9fe08a; }
.pbt-move.poor span { color: #e0a08a; }
.pbt-move:not(:disabled):hover { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px #f0cc6a; }
.pbt-move:disabled { opacity: 0.45; cursor: default; }
.pbt-forfeit { grid-column: 3; grid-row: 1 / span 2; align-self: center; }

/* Guilds (October 2026, guildwin.js): the guild window (Y), the guild's
   name under its members' names, guild chat's bubble and its news. */
#guild-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 620px; z-index: 30; max-width: calc((100vw - 32px) / var(--ui)); max-height: calc((100vh - 32px) / var(--ui)); min-height: min(440px, calc((100vh - 32px) / var(--ui))); display: flex; flex-direction: column; }
#guild-win .qd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 8px 12px 0; }
#guild-win .win-label { font-family: var(--sans); font-size: 19px; color: var(--gold); margin: 12px 0 4px; }
#guild-win .qd-title { font-family: var(--sans); font-size: 17px; color: #d8c8a0; }
.gw-help { font-size: 17px; line-height: 1.2; margin: 4px 0 10px; }
.gw-help b { color: var(--gold); font-weight: 400; }
.gw-note { color: var(--muted); font-size: 15px; margin: 2px 0 8px; }
.gw-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.gw-row.end { justify-content: flex-end; }
.gw-row input { flex: 1 1 200px; font-family: var(--sans); font-size: 21px; color: #f4eedc; background: rgba(14, 13, 11, 0.85); border: 0; padding: 4px 8px; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60; outline: none; }
.gw-row input[type='number'] { flex: 0 0 120px; }
#guild-win .btn.small { font-weight: 400; font-size: 18px; padding: 2px 12px; }
#guild-win .btn.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
#guild-win .btn.sure.armed { color: #ffb0a0; box-shadow: inset 0 0 0 2px #c0402a; }
.gw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 4px; }
#gw-status { color: var(--gold); font-size: 16px; line-height: 1.1; }
#gw-status.bad { color: #ff8a6a; }
/* The War Office (warwin.js): the guild window's look */
#war-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 680px; z-index: 30; max-width: calc((100vw - 32px) / var(--ui)); max-height: calc((100vh - 32px) / var(--ui)); min-height: min(440px, calc((100vh - 32px) / var(--ui))); display: flex; flex-direction: column; }
#war-win .qd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 8px 12px 0; }
#war-win .win-label { font-family: var(--sans); font-size: 19px; color: var(--gold); margin: 12px 0 4px; }
#war-win .qd-title { font-family: var(--sans); font-size: 17px; color: #d8c8a0; }
#war-win .btn.small { font-weight: 400; font-size: 18px; padding: 2px 12px; }
#war-win .btn.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
#war-win .btn.sure.armed { color: #ffb0a0; box-shadow: inset 0 0 0 2px #c0402a; }
#ww-status { color: var(--gold); font-size: 16px; line-height: 1.1; }
#ww-status.bad { color: #ff8a6a; }
#war-win select { font-family: var(--sans); font-size: 18px; color: #f4eedc; background: rgba(14, 13, 11, 0.9); border: 0; padding: 3px 6px; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60; outline: none; }
#war-win .gw-row input[type='number'] { flex: 0 0 130px; }
.ww-fort { margin: 4px 0 8px; padding: 2px 10px 6px; background: rgba(0, 0, 0, 0.2); }
.ww-fort .win-label { margin-top: 6px !important; }
.ww-line { font-size: 17px; line-height: 1.25; margin: 2px 0; }
/* The siege test grounds' matchmaker (siegetest.js) */
#siege-test-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 640px; z-index: 30; max-width: calc((100vw - 32px) / var(--ui)); max-height: calc((100vh - 32px) / var(--ui)); display: flex; flex-direction: column; }
#siege-test-win .qd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 8px 12px 0; }
#siege-test-win .win-label { font-family: var(--sans); font-size: 19px; color: var(--gold); margin: 12px 0 4px; }
#siege-test-win .qd-title { font-family: var(--sans); font-size: 17px; color: #d8c8a0; }
#siege-test-win .btn.small { font-weight: 400; font-size: 18px; padding: 2px 12px; }
#siege-test-win .btn.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
#siege-test-win .btn[disabled] { opacity: 0.45; cursor: default; }
#st-status { color: var(--gold); font-size: 16px; line-height: 1.1; }
#st-status.bad { color: #ff8a6a; }
.st-sides { display: flex; gap: 10px; flex-wrap: wrap; }
.st-side { flex: 1 1 240px; padding: 4px 10px 2px; background: rgba(0, 0, 0, 0.2); box-shadow: inset 3px 0 0 #c0402a; }
.st-side.def { box-shadow: inset 3px 0 0 #3a7ac0; }
.st-side-t { font-family: var(--sans); font-size: 18px; color: #f0d8a8; margin: 2px 0 4px; }
.st-who { font-size: 17px; line-height: 1.25; }
.st-who.off { color: var(--muted); }
.st-lbl { font-family: var(--sans); font-size: 16px; color: #d8c8a0; margin-right: 4px; }
.st-bots { margin: 2px 0 6px; gap: 4px; }
#siege-test-win .st-bots .btn.small { padding: 1px 6px; font-size: 16px; min-width: 0; }
#siege-test-win .st-bots { flex-wrap: nowrap; }
/* The Mod Sea's Harbourmaster (seatest.js) */
#sea-test-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 760px; height: 640px; z-index: 30; max-width: calc((100vw - 32px) / var(--ui)); max-height: calc((100vh - 32px) / var(--ui)); display: flex; flex-direction: column; }
#sea-test-win .qd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 8px 12px 0; }
#sea-test-win .qd-title { font-family: var(--sans); font-size: 17px; color: #d8c8a0; }
#sea-test-win .btn.small { font-weight: 400; font-size: 18px; padding: 2px 12px; }
#sea-test-win .btn.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
#sea-test-win .btn[disabled] { opacity: 0.45; cursor: default; }
#sea-test-win .gw-row { gap: 6px; margin: 6px 0; }
#sea-test-win .st-lbl { min-width: 116px; }
.sq-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 0; flex: none; }
.sq-ships { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.sq-ship { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: rgba(0, 0, 0, 0.22); }
.sq-ship b { font-family: var(--sans); font-weight: 400; font-size: 19px; color: #f0d8a8; }
.sq-ship .gw-note { margin: 0 0 4px; }
.sq-ship .btn { align-self: flex-start; }
.sq-foot-btns { display: flex; gap: 6px; }
/* The Keeper of the Pens' ledger on Mod Island (penkeeper.js) */
#pen-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1040px; height: 760px; z-index: 30; max-width: calc((100vw - 24px) / var(--ui)); max-height: calc((100vh - 24px) / var(--ui)); display: flex; flex-direction: column; }
#pen-win .qd-title { font-family: var(--sans); font-size: 17px; color: #d8c8a0; }
#pen-win .btn.small { font-weight: 400; font-size: 18px; padding: 2px 12px; }
#pen-win .btn.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
#pen-win .btn i { font-style: normal; font-size: 13px; }
#pen-win .btn[disabled] { opacity: 0.45; cursor: default; }
.pk-top { padding: 8px 12px 0; flex: none; }
.pk-say { margin: 0 2px 8px; font-size: 18px; line-height: 1.2; color: #f0dca0; }
.pk-find { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#pk-search { flex: 1 1 260px; min-width: 0; padding: 5px 9px; font-family: var(--sans); font-size: 20px; color: #f4eedc; background: rgba(14, 13, 11, 0.85); border: 0; border-radius: 0; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60; outline: none; user-select: text; -webkit-user-select: text; }
#pk-search:focus { box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60, 0 0 0 2px var(--gold-dim); }
#pk-search::placeholder { color: #8a8270; }
#pk-count { flex: none; font-size: 17px; color: var(--muted); min-width: 84px; }
.pk-filters { margin: 4px 0 4px; }
.pk-frow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 3px 0; }
#pen-win .pk-chip { padding: 0 6px; font-size: 16px; }
#pen-win .pk-chip i { color: var(--muted); margin-left: 4px; font-size: 13px; }
#pen-win .pk-chip.on i { color: #f0dca0; }
#pen-win .pk-clear { margin-left: auto; padding: 1px 8px; font-size: 16px; }
.pk-gap { margin-left: 8px; }
#pk-kind { font-family: var(--sans); font-size: 18px; color: #f4eedc; background: rgba(14, 13, 11, 0.85); border: 0; padding: 2px 6px; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60; outline: none; margin-right: 4px; }
#pk-kind:focus { box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60, 0 0 0 2px var(--gold-dim); }
.pk-sorts { display: flex; align-items: center; gap: 3px; }
#pen-win .pk-sorts .btn.small { padding: 1px 7px; font-size: 16px; }
.pk-lbl { font-size: 17px; color: #d8c8a0; margin-right: 4px; }
.pk-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 10px; padding: 0 12px; }
.pk-left { min-height: 0; display: flex; flex-direction: column; }
.pk-row { display: grid; grid-template-columns: minmax(0, 1fr) 50px 64px 104px 64px 104px; gap: 8px; align-items: baseline; padding: 3px 8px; font-size: 18px; line-height: 1.15; }
.pk-headrow { flex: none; font-size: 15px; color: var(--muted); padding-bottom: 2px; border-bottom: 2px solid rgba(0, 0, 0, 0.45); }
#pk-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.pk-item { background: rgba(0, 0, 0, 0.2); cursor: pointer; }
.pk-item.last { box-shadow: inset -3px 0 0 #e8e8e8; }
.pk-item.sel { background: rgba(242, 201, 90, 0.16); box-shadow: inset 3px 0 0 var(--gold); }
.pk-item.sel.last { box-shadow: inset 3px 0 0 var(--gold), inset -3px 0 0 #e8e8e8; }
.pk-item.sel .pk-cname { color: var(--gold); }
.pk-cname { color: #f4eedc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-item em { display: block; font-style: normal; font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-rank.boss { color: #d47aff; }
.pk-rank.elite { color: #ffb020; }
.pk-rank.normal { color: #d8c8a0; }
.pk-rank.critter { color: #b8b080; }
.pk-none { font-size: 18px; color: var(--muted); margin: 10px 4px; }
.pk-detail { flex: none; margin: 6px 0 0; padding: 4px 10px 5px; min-height: 84px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.06); }
.pk-dhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pk-dname { font-size: 22px; color: var(--gold); }
.pk-dsub { font-size: 17px; color: #d8c8a0; }
.pk-dhead .btn { margin-left: auto; }
.pk-dline { font-size: 17px; line-height: 1.25; color: #ece6d4; margin-top: 3px; }
.pk-dline b { color: #f0dca0; font-weight: 400; }
.pk-dpen { color: var(--muted); }
.pk-dnone { font-size: 17px; color: var(--muted); margin: 4px 0; }
.pk-right { min-height: 0; display: flex; flex-direction: column; }
.pk-maptitle { flex: none; font-size: 15px; color: var(--muted); padding: 3px 2px 2px; border-bottom: 2px solid rgba(0, 0, 0, 0.45); }
.pk-mapwrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; margin-top: 4px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.08); }
#pk-map { display: block; width: 100%; }
.pk-maptip { flex: none; min-height: 38px; font-size: 16px; line-height: 1.15; color: #ece6d4; margin-top: 4px; }
.pk-maptip b { color: #f0dca0; font-weight: 400; }
.pk-legend { flex: none; display: flex; gap: 6px; margin: 2px 0 2px; }
.pk-legend button { font-family: var(--sans); font-size: 15px; color: var(--muted); background: none; border: 0; padding: 0 2px; cursor: pointer; }
.pk-legend button:hover { color: var(--gold); }
.pk-legend b { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.pk-legend .lg-you { background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; }
.pk-legend .lg-her { background: #f2c95a; transform: rotate(45deg) scale(0.85); }
.pk-legend .lg-last { box-shadow: inset 0 0 0 2px #fff; }
.pk-hint { font-size: 16px; color: var(--muted); margin-right: auto; align-self: center; }
/* (after she sends you somewhere: penkeeper.js showNote) */
#pen-note { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 8px; padding: 6px 34px 6px 12px; font-size: 18px; color: #ece6d4; }
#pen-note b { color: var(--gold); font-weight: 400; }
#pen-note .btn.small { font-weight: 400; font-size: 17px; padding: 1px 10px; }
#pen-note .x { top: 2px; right: 6px; }
.ww-line b, .ww-war .gw-gsub b { color: var(--gold); font-weight: 400; }
.ww-war.on .gw-gname { color: #ff9a2a; }
.ww-war { grid-template-columns: 1fr auto; }
.ww-vs { color: var(--muted); font-size: 15px; }
.gw-motd { font-size: 17px; color: #f0dca0; padding: 6px 10px; margin: 0 0 6px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.06); }
.gw-roster, .gw-list { display: flex; flex-direction: column; gap: 3px; }
.gw-member { display: grid; grid-template-columns: 14px 1fr 104px 74px auto; gap: 8px; align-items: center; padding: 3px 6px; font-size: 18px; background: rgba(0, 0, 0, 0.2); }
.gw-member i { color: var(--muted); font-style: normal; font-size: 15px; }
.gw-dot { width: 10px; height: 10px; background: #4a4438; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.6); }
.gw-member.on .gw-dot { background: #5aff7a; box-shadow: 0 0 4px #3ad85a; }
.gw-member:not(.on) .gw-mname { color: #a89e88; }
.gw-rank { font-size: 16px; color: #d8c8a0; }
.gw-rank.leader { color: var(--gold); }
.gw-rank.officer { color: #f0dca0; }
.gw-lvl { font-size: 15px; color: var(--muted); }
.gw-acts { display: flex; gap: 4px; justify-content: flex-end; }
.gw-acts .btn.small { font-size: 15px !important; padding: 1px 8px !important; }
.gw-guild { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 5px 8px; background: rgba(0, 0, 0, 0.2); }
.gw-guild.mine { box-shadow: inset 0 0 0 2px rgba(240, 200, 96, 0.5); }
.gw-gname { font-size: 19px; color: #f2e0b0; }
.gw-gsub { font-size: 15px; color: var(--muted); }
.gw-pill { font-size: 15px; padding: 1px 8px; color: #a89e88; background: rgba(0, 0, 0, 0.35); }
.gw-pill.open { color: #8ae08a; }
.gw-pill.mine { color: var(--gold); }
.gw-gold { font-family: var(--sans); font-size: 22px; color: #d8c8a0; margin: 6px 0; }
.gw-gold span { color: var(--gold); font-size: 30px; }
.pguild { font-family: var(--sans); font-size: 15px; color: #c8e0ff; text-shadow: 0 1px 2px #000, 0 0 3px #000; margin-top: -2px; }
.pguild:empty { display: none; }
.plate.friend.guildmate .pguild { color: #f0dca0; }
.plate.friend.unfriendly .pguild { color: #ffb0a0; }
.plate.friend.enemy .pguild { color: #ffc890; }
.bubble.guild { background: rgba(214, 255, 222, 0.95); color: #0c2a14; }
.bubble.guild::after { border-top-color: rgba(214, 255, 222, 0.95); }
#chat-log .guild-note { color: #a8e8b0; }

/* The guild forts (October 2026, forts.js): the claim's bar by a fort's
   standard, and the fort's window at its construction board. */
#fort-claim { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); min-width: 360px; padding: 8px 16px; text-align: center; font-family: var(--sans); color: #f0e2c0; background: rgba(12, 9, 5, 0.78); border: 1px solid var(--gold-dim); border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.3s; text-shadow: 0 1px 2px #000; }
#fort-claim.on { opacity: 1; }
#fort-claim .fc-t { font-size: 20px; color: var(--gold); }
#fort-claim .fc-s { font-size: 15px; color: #d8c8a0; }
#fort-claim .fc-bar { height: 10px; margin: 6px 0 4px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 1px 1px 0 #000; }
#fort-claim .fc-bar i { display: block; height: 100%; background: linear-gradient(#ffd060, #c8901e); }
/* a siege (forts.js): the piece of wall you hit, and the siege's time round its fort */
#fort-hp { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); min-width: 300px; padding: 6px 14px; text-align: center; font-family: var(--sans); color: #f0e2c0; background: rgba(12, 9, 5, 0.78); border: 1px solid #7a3a2a; border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.3s; text-shadow: 0 1px 2px #000; }
#fort-hp.on { opacity: 1; }
#fort-hp .fh-t { font-size: 17px; color: #ffb090; }
#fort-hp .fh-s { font-size: 13px; color: #d8c8a0; }
#fort-hp .fh-bar { height: 10px; margin: 5px 0 3px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 1px 1px 0 #000; }
#fort-hp .fh-bar i { display: block; height: 100%; background: linear-gradient(#e86040, #902818); transition: width 0.2s; }
#fort-siege { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); padding: 3px 14px; font-family: var(--sans); font-size: 15px; color: #f0d8b0; background: rgba(60, 14, 8, 0.72); border: 1px solid #a04030; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.3s; text-shadow: 0 1px 2px #000; white-space: nowrap; }
#fort-siege.on { opacity: 1; }
#fort-siege b { color: #ffb090; font-weight: normal; }
/* A war's siege: its bar over the screen, the wave's count on the death screen (siege.js) */
#war-siege { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); min-width: 340px; padding: 6px 16px 7px; text-align: center; font-family: var(--sans); color: #f0e2c0; background: rgba(40, 12, 6, 0.8); border: 1px solid #b0502a; border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.3s; text-shadow: 0 1px 2px #000; zoom: var(--ui); }
#war-siege.on { opacity: 1; }
#war-siege .ws-t { font-size: 18px; color: #ffc8a0; }
#war-siege .ws-t b { font-weight: normal; color: #fff0d0; margin-left: 6px; }
#war-siege .ws-s { font-size: 15px; color: #d8c8a0; }
#war-siege .ws-s .att { color: #ff9a2a; }
#war-siege .ws-s .def { color: #a8d0ff; }
#war-siege .ws-s .me { text-decoration: underline; }
#war-siege .ws-bar { height: 10px; margin: 5px 0 3px; background: rgba(0, 0, 0, 0.55); box-shadow: inset 1px 1px 0 #000; }
#war-siege .ws-bar i { display: block; height: 100%; background: linear-gradient(#ffb040, #c05010); transition: width 0.4s; }
#war-siege .ws-bar.down i { background: linear-gradient(#80b0ff, #2a5090); }
#war-siege .ws-bar.held i { opacity: 0.7; }
#war-siege .ws-n { font-size: 13px; color: #c8b890; }
#death-wave { font-family: var(--sans); font-size: 19px; color: #ffd8a0; margin-top: 8px; }
/* A fort's history (forts.js historyHtml: the board, the War Office) */
.fw-hist { font-size: 16px; line-height: 1.25; color: #e8dcc0; padding: 1px 0; }
.fw-hist-h { font-family: var(--sans); font-size: 17px; color: var(--gold); margin: 6px 0 2px; }
#fw-toll { width: 70px; }
#fort-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 680px; z-index: 30; max-width: calc((100vw - 32px) / var(--ui)); max-height: calc((100vh - 32px) / var(--ui)); display: flex; flex-direction: column; }
#fort-win .qd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 8px 12px 0; }
#fort-win .win-label { font-family: var(--sans); font-size: 19px; color: var(--gold); margin: 12px 0 4px; }
#fort-win .qd-title { font-family: var(--sans); font-size: 17px; color: #d8c8a0; }
#fort-win .btn.small, .gw-hold .btn.small { font-weight: 400; font-size: 17px; padding: 2px 10px; }
#fort-win .btn.sure.armed { color: #ffb0a0; box-shadow: inset 0 0 0 2px #c0402a; }
#fw-status { color: var(--gold); font-size: 16px; }
#fw-status.bad { color: #ff8a6a; }
.fw-parts { display: flex; flex-direction: column; gap: 3px; }
/* the walls from above (forts.js wallsHtml): each piece, its part picked */
.fw-walls { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: start; margin-bottom: 6px; }
.fw-map { width: 190px; height: 190px; background: rgba(40, 52, 30, 0.55); border: 1px solid rgba(0, 0, 0, 0.5); }
.fw-map polygon { stroke: #1a1410; stroke-width: 0.25; cursor: pointer; opacity: 0.85; }
.fw-map polygon:hover { opacity: 1; stroke: #f0e2c0; }
.fw-map polygon.on { stroke: #ffd060; stroke-width: 0.7; opacity: 1; }
.fw-map polygon.down { stroke: #e04030; stroke-dasharray: 0.6 0.4; }
/* (a part of the walls not built: faint, its outline) */
.fw-map polygon.none { opacity: 0.28; stroke-dasharray: 0.5 0.5; }
.fw-wpart { display: flex; flex-direction: column; gap: 6px; }
.fw-key i { display: inline-block; width: 10px; height: 10px; margin: 0 3px 0 8px; vertical-align: middle; border: 1px solid #000; }
.fw-part { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: center; padding: 4px 8px; background: rgba(0, 0, 0, 0.2); }
.fw-pname { font-size: 18px; color: #f2e0b0; }
.fw-pname span { display: block; font-size: 15px; color: var(--muted); }
.fw-next { font-size: 15px; color: #d8c8a0; line-height: 1.15; }
.fw-next b { font-weight: 400; color: #f0dca0; }
.fw-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.fw-need { display: inline-flex; align-items: center; gap: 3px; font-size: 16px; color: #f0e2c0; padding: 1px 6px 1px 1px; background: rgba(0, 0, 0, 0.35); }
.fw-need img { width: 24px; height: 24px; image-rendering: pixelated; }
.fw-need.done { color: #8ae08a; }
/* the fort's hired guards (forts.js guardsHtml) */
.fw-guards { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 6px; }
.fw-guard { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #f0e2c0; }
.fw-gname { flex: 0 0 96px; }
.fw-gbar { flex: 1 1 auto; max-width: 160px; height: 8px; background: rgba(0, 0, 0, 0.45); border: 1px solid #5a4a30; }
.fw-gbar i { display: block; height: 100%; background: #b8342a; }
.fw-ghp { flex: 0 0 auto; min-width: 64px; color: #cbbd98; font-size: 14px; }
.fw-ic { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: middle; }
.fw-gold { font-size: 15px; color: var(--gold); }
.fw-time { font-size: 15px; color: var(--muted); }
.fw-check { font-size: 16px; display: inline-flex; gap: 6px; align-items: center; }
/* The fort window's Build tab (23 October 2026, the user's: as the quest
   log): the list of what there is to build in a dark well on the left,
   grouped; the part picked on parchment on the right. */
#fort-win.building { width: 900px; height: 640px; }
#fort-win .fw-tabs { display: flex; gap: 4px; margin: 6px 12px 0; }
#fort-win .fw-tabs button { font: 17px var(--sans); color: #c8b890; padding: 1px 12px; background: rgba(0, 0, 0, 0.45); border: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px #4e4a40; cursor: pointer; text-shadow: 1px 1px 0 #000; }
#fort-win .fw-tabs button.on { color: #ffe7a0; background: rgba(110, 80, 30, 0.6); box-shadow: 0 0 0 2px #000, 0 0 0 3px #b08a44; }
#fort-win.building .qd-body { overflow: hidden; display: flex; }
.fw-main { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; }
.fw-list { flex: 0 0 38%; overflow-y: auto; padding: 4px 2px; background: rgba(8, 7, 6, 0.72); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px #000; font: 17px var(--sans); }
.fw-grp { padding: 6px 6px 1px; color: #ffd84a; text-shadow: 1px 1px 0 #000; }
.fw-sub { padding: 3px 8px 0 14px; color: #a89a7a; font-size: 15px; }
.fw-li { display: flex; align-items: center; gap: 6px; padding: 1px 6px 1px 22px; cursor: pointer; white-space: nowrap; user-select: none; color: #e8dcc0; }
.fw-li:hover { background: rgba(255, 216, 74, 0.08); }
.fw-li.sel { background: linear-gradient(90deg, rgba(255, 200, 40, 0.45), rgba(255, 200, 40, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 230, 140, 0.5), inset 0 -1px 0 rgba(120, 80, 0, 0.6); color: #fff6d0; }
.fw-li-n { overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000; }
.fw-li-t { flex: 0 0 auto; margin-left: auto; padding-left: 6px; color: #a89a7a; font-size: 15px; }
.fw-li-t.ready { color: #7aff5a; }
.fw-li-t.max { color: #6e6a60; }
.fw-li-t.busy { color: #ffb84a; }
.fw-li-t.locked { color: #6e6a60; font-style: italic; }
.fw-pg h3.fw-got { color: #2a5a10; }
.fw-page { flex: 1 1 auto; overflow-y: auto; color: #3a2610; text-shadow: none; background: radial-gradient(ellipse at 50% 40%, rgba(255, 248, 220, 0.5), rgba(255, 248, 220, 0) 70%), linear-gradient(#e8d8b0, #d8c494); box-shadow: inset 0 0 18px rgba(90, 50, 10, 0.45), 0 0 0 2px #000; }
.fw-pg { padding: 12px 18px 16px; font: 18px var(--sans); line-height: 1.15; }
.fw-pg h2 { margin: 0 0 6px; font-family: var(--display); font-size: 22px; color: #4a1e08; }
.fw-pg h3 { margin: 12px 0 4px; font-family: var(--display); font-size: 17px; color: #5a2a0a; border-bottom: 1px solid rgba(90, 42, 10, 0.35); }
.fw-pg p { margin: 0 0 7px; }
.fw-now b, .fw-why { color: #5a2a0a; }
.fw-why { color: #8a2a10; }
.fw-done { color: #2a6a10; }
.fw-note { color: #6a4a28; font-size: 16px; }
.fw-mapbox { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; }
.fw-mapbox .fw-map { flex: 0 0 auto; width: 170px; height: 170px; background: rgba(60, 80, 40, 0.75); }
.fw-mapbox .fw-key { font-size: 14px; color: #5a4020; line-height: 1.4; }
.fw-tiers { display: flex; flex-direction: column; gap: 2px; }
.fw-tier { display: flex; align-items: center; gap: 8px; padding: 2px 6px; color: #8a7050; }
.fw-tier b { flex: 0 0 18px; text-align: center; font-weight: 400; }
.fw-tier span { color: #8a7a5a; font-size: 15px; }
.fw-tier.built { color: #2a5a10; }
.fw-tier.next { color: #4a1e08; background: rgba(255, 220, 120, 0.35); box-shadow: inset 0 0 0 1px rgba(120, 70, 10, 0.5); }
.fw-costs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 4px 0 8px; }
.fw-cost { display: flex; align-items: center; gap: 6px; padding: 2px 6px 2px 2px; background: rgba(60, 36, 10, 0.16); box-shadow: inset 0 0 0 1px rgba(90, 50, 10, 0.4); font-size: 16px; }
.fw-cost img { width: 32px; height: 32px; image-rendering: pixelated; background: #1a140c; box-shadow: 0 0 0 1px #000; }
.fw-cost i { margin-left: auto; font-style: normal; font-size: 14px; color: #8a2a10; }
.fw-cost.ok i { color: #2a6a10; }
.fw-cost.gold b, .fw-cost.time b { width: 32px; text-align: center; font-weight: 400; color: #6a4a08; }
.fw-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.fw-act .btn.big { font-size: 18px; padding: 4px 16px; }
.fw-prog { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 16px; }
.fw-prog img { width: 28px; height: 28px; image-rendering: pixelated; background: #1a140c; box-shadow: 0 0 0 1px #000; }
.fw-prog span { flex: 0 0 120px; }
.fw-prog .fw-bar { flex: 1 1 auto; height: 10px; background: rgba(40, 20, 0, 0.35); box-shadow: 0 0 0 1px rgba(60, 30, 0, 0.6); }
.fw-prog .fw-bar i { display: block; height: 100%; background: linear-gradient(#a8d870, #4a8a1a); }
.fw-prog em { font-style: normal; font-size: 14px; color: #6a4a28; }
@media (max-width: 720px) {
  .fw-main { flex-direction: column; }
  .fw-list { flex: 0 0 auto; max-height: 40%; }
  .fw-costs { grid-template-columns: 1fr; }
}
#fw-fee { width: 90px; font-family: var(--sans); font-size: 18px; color: #f4eedc; background: rgba(14, 13, 11, 0.85); border: 0; padding: 2px 6px; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60; }

/* Siege gear (siegegear.js): holding F to unpack or push a ladder over, what
   you are working, each piece's bar, the cannon's sight. */
#gear-hold { position: absolute; left: 50%; bottom: 160px; transform: translateX(-50%); min-width: 260px; padding: 6px 14px; text-align: center; font-family: var(--sans); color: #f0e2c0; background: rgba(12, 9, 5, 0.8); border: 1px solid var(--gold-dim); border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.15s; text-shadow: 0 1px 2px #000; zoom: var(--ui); }
#gear-hold.on { opacity: 1; }
#gear-hold .gh-t { font-size: 14px; }
#gear-hold .gh-bar, #gear-hud .gh-bar { height: 8px; margin: 5px 0 2px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 1px 1px 0 #000; }
#gear-hold .gh-bar i { display: block; height: 100%; background: linear-gradient(#f2d374, #a8740e); }
#gear-hud { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); min-width: 300px; max-width: 470px; padding: 6px 14px; text-align: center; font-family: var(--sans); color: #f0e2c0; background: rgba(12, 9, 5, 0.78); border: 1px solid #7a5a2a; border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.2s; text-shadow: 0 1px 2px #000; zoom: var(--ui); }
#gear-hud.on { opacity: 1; }
#gear-hud .gh-n { font-size: 16px; color: #ffd08a; }
#gear-hud .gh-on { font-size: 15px; color: #8cff6a; }
/* where a cannon's or a trebuchet's shot comes down, on the screen; the ring
   in the middle in the same colour: gold open ground, green the enemy, red
   where it can't go (siegegear.js) */
#gear-mark { display: none; position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #ffb040; transform: rotate(45deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); pointer-events: none; z-index: 5; }
#gear-mark.foe { border-color: #6cff4a; }
#gear-mark.no { border-color: #ff3020; }
body.on-siege-gun.gun-foe::after { border-color: #6cff4a; }
body.on-siege-gun.gun-no::after { border-color: #ff3020; }
#gear-hud .gh-on.no { color: #ff7a5a; }
#gear-hud .gh-s { font-size: 13px; color: #d8c8a0; }
#gear-hud .gh-bar i { display: block; height: 100%; background: linear-gradient(#8ad060, #3a7a28); }
.gear-bar { position: absolute; transform: translate(-50%, -100%); min-width: 110px; padding: 2px 6px 3px; text-align: center; font: 11px var(--sans); color: #f0e2c0; background: rgba(12, 9, 5, 0.65); border-radius: 3px; pointer-events: none; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.gear-bar .gb-bar { height: 5px; margin-top: 2px; background: rgba(0, 0, 0, 0.55); }
.gear-bar .gb-bar i { display: block; height: 100%; background: linear-gradient(#8ad060, #3a7a28); transition: width 0.2s; }
.gear-bar.foe .gb-bar i { background: linear-gradient(#e86040, #902818); }
#war-siege .ws-gear { font-size: 13px; color: #e8c890; margin-top: 2px; }
/* (laying a cannon or a trebuchet: no sword's arrows, guard or combo, only
   the ring at the middle the engine is laid by: siegegear.js) */
body.on-siege-gun #reticle, body.on-siege-gun #dodge-ring, body.on-siege-gun #crosshair, body.on-siege-gun #combo { display: none !important; }
body.on-siege-gun::after { content: ''; position: fixed; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid rgba(240, 230, 205, 0.85); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); pointer-events: none; z-index: 5; }
body.gear-holding #fort-hint { opacity: 0 !important; }

/* The lance couched (mounts.js couchBadge): under the crosshair, with how
   hard it would strike at this pace, gold at a full gallop */
#couch-badge { position: absolute; left: 50%; top: calc(50% + 30px); transform: translateX(-50%); display: none; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; background: rgba(20, 14, 6, 0.72); border: 1px solid #8a6a2a; border-radius: 4px; pointer-events: none; zoom: var(--ui); }
#couch-badge.on { display: flex; }
#couch-badge .cb-icon canvas { width: 26px; height: 26px; image-rendering: pixelated; display: block; }
#couch-badge .cb-text { display: flex; flex-direction: column; gap: 3px; }
#couch-badge b { font-family: var(--pixel, VT323, monospace); font-size: 15px; font-weight: 400; color: #ffd27a; text-shadow: 1px 1px 0 #000; line-height: 1; letter-spacing: 0.5px; }
#couch-badge .cb-bar { width: 64px; height: 5px; background: rgba(0, 0, 0, 0.7); border: 1px solid #000; }
#couch-badge .cb-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#fff0a0 0 1px, #e0a010 1px); }
#couch-badge.full { border-color: #ffd27a; box-shadow: 0 0 8px rgba(255, 200, 80, 0.55); }
#couch-badge.full .cb-bar i { background: linear-gradient(#fff 0 1px, #ffc030 1px); }
/* the lance's point on something (mounts.js couch, October 2026): the badge and the crosshair gold */
#couch-badge.aimed { border-color: #ffd27a; }
#couch-badge.aimed b { color: #fff4c0; }
body.lance-on #crosshair .dot { background: #ffd27a; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.7), 0 0 6px rgba(255, 200, 80, 0.9); }

/* Fishing (fishing.js): the prompt by the water, and the bar for the bite
   and the fight: the gold band to let go in, its bright middle for a
   perfect pull, the needle that runs while F is held; the pulls won and the
   line's strain under it. */
#fish-hint em { font-style: normal; color: #e8b090; }
#fish-hint .fh-ground { color: #9fd0f0; }
#fish-hint .fh-ground.elite { color: #ff8ab8; }
#fish-bar { position: absolute; left: 50%; bottom: 248px; width: 340px; transform: translateX(-50%); padding: 8px 12px 7px; font: 18px var(--sans); color: #f0e2c0; text-align: center; text-shadow: 1px 1px 0 #000; background: rgba(0, 0, 0, 0.72); box-shadow: 0 0 0 2px #000, 0 0 0 4px #a8a498, 0 0 0 5px #000; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
#fish-bar.on { opacity: 1; }
#fish-bar .fb-dim { color: #a89a7a; font-size: 15px; }
#fish-bar .fb-strike { color: #ffd84a; animation: fb-pulse 0.35s steps(2) infinite; }
@keyframes fb-pulse { 50% { color: #fff6c0; } }
#fish-bar .fb-track, #fish-bar .fb-foot { display: none; }
#fish-bar.fight .fb-track { display: block; position: relative; height: 16px; margin: 7px 2px 6px; background: linear-gradient(90deg, #1a2a3a, #24384a 60%, #4a1a14); box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(0, 0, 0, 0.5); }
#fish-bar .fb-track.resting { filter: brightness(0.55); }
#fish-bar .fb-track i { position: absolute; top: 0; bottom: 0; }
#fish-bar .fb-band { background: linear-gradient(#ffe890, #d8a020); box-shadow: inset 1px 1px 0 #fff8c0, inset -1px -1px 0 #6e4a00; }
#fish-bar .fb-core { background: #fff6c0; box-shadow: 0 0 6px 1px rgba(255, 236, 140, 0.9); }
#fish-bar .fb-needle { width: 3px; margin-left: -1px; top: -5px; bottom: -5px; background: #fff; box-shadow: 0 0 0 1px #000; }
#fish-bar .fb-track.hot .fb-needle { background: #ff6a4a; }
#fish-bar.fight .fb-foot { display: flex; justify-content: space-between; font-size: 15px; color: #c8b890; }
#fish-bar .fb-foot b { display: inline-block; width: 10px; height: 10px; margin-left: 4px; vertical-align: -1px; box-shadow: 0 0 0 1px #000; }
#fish-bar .fb-foot b.on { background: #ffd84a; }
#fish-bar .fb-foot b.off { background: #3a3428; }
#fish-bar .fb-foot b.ok { background: #8ac8e8; }
#fish-bar .fb-foot b.gone { background: #6a2018; }
body.in-minigame #fish-hint, body.in-minigame #fish-bar { display: none; }

/* The moderators' bar on the map (modmap.js): tick boxes for the overlay
   (off: the map as players see it) and each of its layers. */
.map-mod { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 6px 8px; font: 17px var(--sans); color: #e8d8b0; text-shadow: 1px 1px 0 #000; }
.map-mod.hidden { display: none; }
.map-mod .mm-layers { display: flex; flex-wrap: wrap; gap: 6px; }
.map-mod .mm-layers.off { opacity: 0.45; pointer-events: none; }
.mm-tick { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px; font: inherit; color: inherit; background: rgba(0, 0, 0, 0.45); border: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px #6e6a60; cursor: pointer; }
.mm-tick:hover { filter: brightness(1.25); }
.mm-tick i { width: 12px; height: 12px; background: #1a140c; box-shadow: inset 0 0 0 1px #a89a7a; position: relative; }
.mm-tick.on i { background: #3a5a1e; box-shadow: inset 0 0 0 1px #9fe08a; }
.mm-tick.on i::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #e8ffd0; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mm-tick.mm-master { color: #ffd84a; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--gold, #f2c95a); }
.map-mod .mm-note { margin-left: auto; color: #a89a7a; font-size: 15px; }
#map-tip .mm-fish { font-style: normal; line-height: 1.25; margin: 3px 0; }

/* The quest log (questlog.js; October 2026, the user's: like World of
   Warcraft's, in Todroth's stone and parchment). A list of the quests by
   zone on the left in a dark well, the chosen quest's page on parchment on
   the right, its buttons along the foot. */
#quest-log { z-index: 21; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 860px; height: 600px; max-width: calc((100vw - 24px) / var(--ui)); max-height: calc((100vh - 24px) / var(--ui)); display: flex; flex-direction: column; padding: 0; }
#quest-log .ql-head { position: relative; display: flex; align-items: center; justify-content: center; height: 42px; margin: 0 0 6px; background: linear-gradient(rgba(70, 40, 10, 0.55), rgba(30, 18, 6, 0.55)); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 -2px 0 rgba(255, 220, 140, 0.15); }
#quest-log .ql-title { font-family: var(--display); font-size: 24px; letter-spacing: 0.06em; color: #ffd84a; text-shadow: 2px 2px 0 #000; }
#quest-log .ql-head .x { top: 6px; right: 8px; }
/* (a little book in the corner, as the original's) */
.ql-book { position: absolute; left: 10px; top: 4px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6a5a3a, #2a1e10); box-shadow: 0 0 0 2px #000, 0 0 0 4px #b08a44, 0 0 0 5px #000; }
.ql-book i { position: absolute; left: 8px; top: 9px; width: 18px; height: 15px; background: linear-gradient(90deg, #3a62a8 0 46%, #1a2a50 46% 54%, #3a62a8 54%); box-shadow: 0 0 0 1px #0c1428, inset 0 -3px 0 #e8dcc0; transform: rotate(-8deg); }
.ql-book i::after { content: ''; position: absolute; left: 7px; top: 4px; width: 4px; height: 4px; background: #ffd84a; box-shadow: 0 0 3px #ffd84a; }
#quest-log .ql-bar { display: flex; align-items: center; gap: 12px; padding: 0 6px 6px; font: 18px var(--sans); color: #e8d8b0; }
.ql-all { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: #ffd84a; background: none; border: 0; cursor: pointer; text-shadow: 1px 1px 0 #000; padding: 0 4px; }
.ql-pm { display: inline-block; width: 13px; height: 13px; line-height: 12px; font-style: normal; text-align: center; font-size: 14px; color: #fff; background: #7a1a10; box-shadow: 0 0 0 1px #000, inset 1px 1px 0 #c84a3a; }
.ql-count { padding: 1px 10px; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 2px #000, 0 0 0 3px #6e6a60; }
.ql-count b { color: #ffd84a; font-weight: 400; }
#quest-log .ql-tabs { display: flex; gap: 4px; margin: 0; }
#quest-log .ql-tabs button { font: 17px var(--sans); color: #c8b890; padding: 1px 10px; background: rgba(0, 0, 0, 0.45); border: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px #4e4a40; cursor: pointer; text-shadow: 1px 1px 0 #000; }
#quest-log .ql-tabs button.on { color: #ffe7a0; background: rgba(110, 80, 30, 0.6); box-shadow: 0 0 0 2px #000, 0 0 0 3px #b08a44; }
#quest-log .ql-map { margin-left: auto; }
#quest-log .ql-main { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; padding: 0 4px; }
/* the list: a dark well */
#quest-log .ql-list { flex: 0 0 43%; overflow-y: auto; padding: 4px 2px; background: rgba(8, 7, 6, 0.72); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px #000; font: 18px var(--sans); }
.ql-zone { display: flex; align-items: center; gap: 7px; padding: 3px 6px 1px; color: #e8dcc0; cursor: pointer; user-select: none; }
.ql-zone:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.ql-zn { margin-left: auto; color: #8a7e66; font-size: 15px; }
.ql-row { display: flex; align-items: center; gap: 5px; padding: 1px 6px 1px 18px; cursor: pointer; white-space: nowrap; user-select: none; }
.ql-row:hover { background: rgba(255, 216, 74, 0.08); }
.ql-row.sel { background: linear-gradient(90deg, rgba(255, 200, 40, 0.45), rgba(255, 200, 40, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 230, 140, 0.5), inset 0 -1px 0 rgba(120, 80, 0, 0.6); }
.ql-row.sel .ql-name { color: #fff6d0 !important; }
.ql-name { overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000; }
.ql-tag { flex: 0 0 auto; margin-left: auto; padding-left: 6px; color: #c8b890; font-size: 16px; }
.ql-tag.ok { color: #7aff5a; }
.ql-trk { flex: 0 0 auto; width: 9px; height: 9px; margin-left: -12px; margin-right: 3px; }
.ql-trk.on { background: #ffd84a; box-shadow: 0 0 0 1px #000; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ql-none { margin: 10px; color: #a89a7a; white-space: normal; }
/* the page: parchment, in ink */
#quest-log .ql-page { flex: 1 1 auto; overflow-y: auto; position: relative; color: #3a2610; text-shadow: none; background: radial-gradient(ellipse at 50% 40%, rgba(255, 248, 220, 0.5), rgba(255, 248, 220, 0) 70%), repeating-linear-gradient(0deg, rgba(120, 80, 30, 0.05) 0 2px, rgba(0, 0, 0, 0) 2px 5px), linear-gradient(160deg, #ecdcb0, #d8c08a 55%, #c4a468); box-shadow: inset 0 0 0 2px #5a3a14, inset 0 0 26px rgba(90, 50, 10, 0.55), 0 0 0 2px #000; }
.qp-in { padding: 12px 18px 16px; font: 19px var(--sans); line-height: 1.15; }
.qp-in h2 { margin: 0 0 6px; font-family: var(--display); font-size: 22px; color: #4a1e08; letter-spacing: 0.02em; }
.qp-in h3 { margin: 12px 0 4px; font-family: var(--display); font-size: 17px; color: #5a2a0a; border-bottom: 1px solid rgba(90, 42, 10, 0.35); }
.qp-in p { margin: 0 0 7px; }
.qp-obj { margin: 0 0 6px; padding-left: 18px; }
.qp-obj li { margin: 1px 0; }
.qp-obj li.ok { color: #2a6a10; }
.qp-tick { color: #2a6a10; font-size: 16px; }
.qp-next { color: #6a3a08; }
.qp-next.ready { color: #2a6a10; }
.qp-group { color: #8a2a10; }
.qp-small { font-size: 18px; }
/* The Bestiary (bestiarylog.js): the quest log's tab of every creature killed */
#quest-log.ql-bst [data-ql='abandon'], #quest-log.ql-bst [data-ql='share'], #quest-log.ql-bst [data-ql='track'], #quest-log.ql-bst [data-ql='map'], #quest-log.ql-bst .ql-tracking, #quest-log.ql-bst .ql-modtog { display: none; }
.bst-pg { padding: 12px 18px 16px; font: 19px var(--sans); line-height: 1.15; }
.bst-pg h2 { margin: 0 0 8px; font-family: var(--display); font-size: 22px; color: #4a1e08; letter-spacing: 0.02em; }
.bst-pg h3 { margin: 12px 0 4px; font-family: var(--display); font-size: 17px; color: #5a2a0a; border-bottom: 1px solid rgba(90, 42, 10, 0.35); }
.bst-boss { font: 14px var(--sans); color: #8a2a10; border: 1px solid #8a2a10; border-radius: 2px; padding: 0 5px; vertical-align: middle; }
.bst-pic { width: 280px; height: 200px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(90, 42, 10, 0.45); box-shadow: 0 2px 6px rgba(60, 30, 0, 0.3); background: #efe2c2; color: #8a6a3a; font-size: 16px; }
.bst-pic img { display: block; width: 280px; height: 200px; }
.bst-facts { margin: 0 0 6px; color: #5a3a18; }
.bst-loot { margin: 0; padding-left: 20px; }
.bst-loot li { margin: 1px 0; }
.bst-had { color: #2a4a10; cursor: default; }
.bst-q { color: #8a7a5a; letter-spacing: 0.1em; }
.bst-rare { color: #8a5a10; font-size: 16px; }
.qp-sign { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 6px 0 2px; }
.qp-by { font-family: var(--display); font-style: italic; font-size: 18px; color: #2a3a6a; }
.qp-by::before { content: '\2014\00a0'; }
/* (the wax seal: red, with a toad pressed in it) */
.qp-seal { position: relative; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #e04a3a, #a01c14 55%, #6a0c08); box-shadow: 0 2px 3px rgba(60, 10, 0, 0.5), inset 0 0 0 3px rgba(80, 8, 4, 0.5); }
.qp-seal i { position: absolute; left: 11px; top: 12px; width: 16px; height: 12px; border-radius: 50% 50% 40% 40%; background: rgba(60, 4, 2, 0.55); box-shadow: -4px -4px 0 -2px rgba(60, 4, 2, 0.55), 4px -4px 0 -2px rgba(60, 4, 2, 0.55); }
.qp-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 8px; }
.qp-item { display: flex; align-items: center; gap: 6px; padding: 2px; background: rgba(60, 36, 10, 0.18); box-shadow: inset 0 0 0 1px rgba(90, 50, 10, 0.45); cursor: default; }
.qp-icon { position: relative; flex: 0 0 auto; width: 40px; height: 40px; background: #1a140c; box-shadow: 0 0 0 2px #000, 0 0 0 3px #b08a44; }
.qp-icon img { width: 40px; height: 40px; image-rendering: pixelated; }
.qp-icon b { position: absolute; right: 2px; bottom: 0; color: #fff; font-weight: 400; text-shadow: 1px 1px 0 #000; }
.qp-iname { font-size: 17px; line-height: 1; color: #3a2610; }
.qp-gold { color: #6a4a08; }
.qp-coin { display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff0a0, #e6b42a 50%, #8a6a08); box-shadow: 0 0 0 1px #5a3c08; }
.qp-xp { color: #3a2a6a; font-weight: 400; }
.qp-empty { padding: 20px; color: #6a5030; font: 19px var(--sans); }
.qp-in.done { opacity: 0.92; }
.qp-stamp { position: absolute; right: 16px; top: 14px; padding: 2px 10px; font-family: var(--display); font-size: 18px; color: rgba(40, 110, 20, 0.85); border: 3px solid rgba(40, 110, 20, 0.75); transform: rotate(8deg); letter-spacing: 0.08em; }
/* the foot */
#quest-log .ql-foot { display: flex; align-items: center; gap: 8px; padding: 8px 4px 2px; }
#quest-log .ql-foot .btn { min-width: 108px; }
#quest-log .ql-foot .btn:disabled, #quest-log .ql-map:disabled { filter: grayscale(1) brightness(0.6); cursor: default; }
#quest-log .ql-foot [data-ql=close] { margin-left: auto; }
.ql-tracking { margin-left: 8px; font: 16px var(--sans); color: #a89a7a; }
/* Abandon? */
#quest-log .ql-ask { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); }
#quest-log .ql-ask.hidden { display: none; }
.ql-ask-in { width: 380px; padding: 14px 18px; font: 19px var(--sans); color: #efe4c8; background: var(--ui-stone) 0 0 / 128px; border: 12px solid transparent; border-image: var(--ui-frame-stone) 6 / 12px / 0 repeat; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4); text-align: center; }
.ql-ask-in b { color: #ffd84a; font-weight: 400; }
.ql-ask-btns { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
@media (max-width: 720px) {
  #quest-log .ql-main { flex-direction: column; }
  #quest-log .ql-list { flex: 0 0 38%; }
  #quest-log .ql-foot .btn { min-width: 0; }
}

/* The graphics settings, full screen and the game menu (October 2026:
   graphics.js, fullscreen.js, settingswin.js) */
#settings-win { width: 640px; }
.set-tabs { flex-wrap: wrap; }
.set-row.opt { grid-template-columns: 1fr auto; }
.set-row.opt .set-views { grid-column: auto; flex-wrap: wrap; }
.set-levels .btn { min-width: 74px; }
.set-levels { margin-bottom: 4px; }
.set-custom { align-self: center; font-size: 17px; color: var(--gold); padding: 0 4px; }
#fps-counter { position: fixed; left: 50%; transform: translateX(-50%); top: 2px; z-index: 60; font-family: var(--sans); font-size: 18px; color: #f8e8b0; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; pointer-events: none; }
#game-menu { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; z-index: 31; }
#game-menu .gm-list { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 6px; }
#game-menu .gm-btn { width: 100%; font-weight: 400; font-size: 20px; padding: 5px 12px; }
#game-menu .gm-foot { text-align: center; font-size: 16px; padding: 4px 0 10px; }

/* Pondmaster Quill's Testing Pond picker (fishing.js) */
#pond-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, calc((100vw - 32px) / var(--ui))); max-height: calc((100vh - 40px) / var(--ui)); overflow-y: auto; z-index: 21; }
#pond-win .pond-row { display: flex; align-items: baseline; gap: 8px; }
#pond-win .pond-row.on { background: rgba(255, 216, 74, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 216, 74, 0.6); }
#pond-win .pond-name { min-width: 180px; }
#pond-win .pond-info { margin-left: auto; font-weight: 400; color: #c8b890; font-size: 15px; text-align: right; }
/* Houses (housing.js, housemod.js) */
#house-win, #house-mod-win, #farm-win, #farm-mod-win, #decree-mod-win, #fort-mod-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; z-index: 30; max-width: calc((100vw - 32px) / var(--ui)); max-height: calc((100vh - 32px) / var(--ui)); display: flex; flex-direction: column; }
#house-mod-win, #farm-mod-win, #decree-mod-win, #fort-mod-win { width: 820px; }
#house-win .qd-body, #house-mod-win .qd-body, #farm-win .qd-body, #farm-mod-win .qd-body, #decree-mod-win .qd-body, #fort-mod-win .qd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 8px 12px 0; }
#house-win .win-label, #house-mod-win .win-label, #farm-win .win-label, #farm-mod-win .win-label, #fort-mod-win .win-label { font-family: var(--sans); font-size: 19px; color: var(--gold); margin: 12px 0 4px; }
.hw-line { font-family: var(--sans); font-size: 17px; color: #f0e2c0; margin: 2px 0 6px; display: flex; align-items: center; gap: 8px; }
.hw-flag { display: inline-block; flex: 0 0 auto; width: 14px; height: 10px; box-shadow: 0 0 0 1px #000; }
.hw-flag.paid { background: #3aa04a; }
.hw-flag.due { background: #c0302a; }
.hw-flag.free { background: #d8c8a0; }
.hw-list { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 6px; }
.hw-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--sans); font-size: 17px; color: #f0e2c0; padding: 2px 6px; background: rgba(0, 0, 0, 0.22); }
.hw-held { color: var(--gold); }
.hm-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 15px; color: #f0e2c0; }
.hm-table th { text-align: left; color: var(--gold); font-weight: normal; padding: 2px 6px; border-bottom: 1px solid var(--gold-dim); }
.hm-table td { padding: 3px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: top; }
.hm-table tr.on td { background: rgba(224, 176, 64, 0.12); }
.hm-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.hm-acts .btn.small { padding: 1px 6px; font-size: 14px; }
#house-win .qd-title, #house-mod-win .qd-title, #farm-win .qd-title, #farm-mod-win .qd-title, #decree-mod-win .qd-title { font-family: var(--sans); font-size: 17px; color: #d8c8a0; }
#house-win .btn.small, #house-mod-win .btn.small, #farm-win .btn.small, #farm-mod-win .btn.small, #decree-mod-win .btn.small { font-weight: 400; font-size: 17px; padding: 2px 10px; }
#house-win .btn.on, #house-mod-win .btn.on, #farm-win .btn.on, #farm-mod-win .btn.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
#house-win .btn[disabled], #house-mod-win .btn[disabled], #farm-win .btn[disabled], #farm-mod-win .btn[disabled] { opacity: 0.45; cursor: default; }
/* Farms (farming.js, farmmod.js): the houses' look */
#farm-hint .fw-sub { font-size: 14px; color: #c8b890; margin-top: 2px; }
#farm-hint .fw-bar { position: relative; height: 8px; margin: 5px 0 1px; background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 1px #000, 0 0 0 2px #a8a498; }
#farm-hint .fw-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#d8f0a0, #6a9a2a); }
.fw-ready { color: #b8e878; font-weight: normal; }
.fw-wilt { color: #c8a070; }
.fm-speed { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
/* The Build Master's loadouts (loadouts.js): the guild window's look */
#loadout-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 760px; z-index: 30; max-width: calc((100vw - 32px) / var(--ui)); max-height: calc((100vh - 32px) / var(--ui)); min-height: min(520px, calc((100vh - 32px) / var(--ui))); display: flex; flex-direction: column; }
#loadout-win .qd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 12px; }
#loadout-win .qd-title { font-family: var(--sans); font-size: 17px; color: #d8c8a0; }
#loadout-win .btn.small { font-weight: 400; font-size: 18px; padding: 2px 12px; }
#loadout-win .btn.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
#loadout-win .btn.sure.armed { color: #ffb0a0; box-shadow: inset 0 0 0 2px #c0402a; }
#loadout-win .btn[disabled] { opacity: 0.45; cursor: default; }
.lo-tabs { display: flex; gap: 6px; padding: 8px 12px; }
.lo-groups { gap: 4px; margin-top: 0; }
#loadout-win .lo-groups .btn.small { font-size: 16px; padding: 1px 9px; }
#lo-status { color: var(--gold); font-size: 16px; line-height: 1.1; }
#lo-status.bad { color: #ff8a6a; }
.lo-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.lo-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; background: rgba(0, 0, 0, 0.2); }
.lo-row:hover { background: rgba(60, 56, 48, 0.55); }
.lo-main { flex: 1 1 auto; min-width: 0; }
.lo-name { font-size: 20px; color: #f2e0b0; line-height: 1.1; }
.lo-name em { font-style: normal; font-size: 15px; color: var(--muted); margin-left: 4px; }
.lo-blurb { font-size: 15px; color: #d8c8a0; line-height: 1.2; margin: 2px 0 4px; }
.lo-sub { font-size: 15px; color: #e8c060; margin: 6px 0 2px; }
.lo-icons { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.lo-icon { position: relative; width: 34px; height: 34px; background: rgba(14, 13, 11, 0.85); box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60; display: inline-flex; align-items: center; justify-content: center; }
.lo-icon img { width: 30px; height: 30px; image-rendering: pixelated; pointer-events: none; }
.lo-icon i { position: absolute; right: 1px; bottom: -2px; font-style: normal; font-size: 13px; color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000; pointer-events: none; }
.lo-icons.small .lo-icon { width: 26px; height: 26px; }
.lo-icons.small .lo-icon img { width: 22px; height: 22px; }
.lo-acts { display: flex; flex-direction: column; gap: 4px; flex: none; }
.lo-rename { margin: 0 0 4px; }
.lo-rename input { font-size: 18px !important; }
#lo-search, #lo-name { flex: 1 1 200px; }
.lo-acts.four { display: grid; grid-template-columns: auto auto; }
/* The quest log's moderator tools (questlog.js, modquests.js; October 2026) */
#quest-log .ql-modtog { margin-left: 0; }
#quest-log .ql-modtog.on { color: #fff6c0; box-shadow: inset 0 0 0 2px var(--gold); background: linear-gradient(#7a4a12, #3e2206); }
#quest-log .ql-modbar { display: flex; align-items: center; gap: 10px; padding: 0 6px 6px; font: 16px var(--sans); color: #e8d8b0; }
#ql-search { flex: 1 1 260px; max-width: 340px; font: 17px var(--sans); color: #f2e0b0; background: rgba(0, 0, 0, 0.5); border: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px #6e6a60; padding: 2px 8px; outline: none; user-select: text; }
#ql-search:focus { box-shadow: 0 0 0 2px #000, 0 0 0 3px #b08a44; }
.ql-mstatus { flex: 1 1 auto; min-width: 0; color: #ffd84a; text-shadow: 1px 1px 0 #000; line-height: 1.05; }
.ql-mstatus.bad { color: #ff9a7a; }
.ql-rw { display: flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; color: #c8b890; }
#quest-log .ql-modbar .btn:disabled { filter: grayscale(1) brightness(0.6); cursor: default; }
.ql-mm { flex: 0 0 14px; text-align: center; font-size: 15px; text-shadow: 1px 1px 0 #000; }
.ql-mm.done { color: #7aff5a; }
.ql-mm.complete, .ql-mm.available { color: #ffd84a; }
.ql-mm.active { color: #8fd0ff; }
.ql-mm.level { color: #ff9a3a; }
.ql-mm.locked { color: #6e6a60; }
.ql-row.locked .ql-name { opacity: 0.6; }
.qmt-step { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: 1px; }
.qmt { margin: 8px 0 10px; padding: 6px 8px 4px; background: rgba(60, 36, 10, 0.12); box-shadow: inset 0 0 0 1px rgba(90, 50, 10, 0.45); }
.qmt-head { font-family: var(--display); font-size: 16px; color: #5a2a0a; margin-bottom: 4px; }
.qmt-head span { font-family: var(--sans); font-size: 15px; color: #7a5a30; margin-left: 8px; }
.qmt-why { color: #8a2a10; font-size: 17px; }
.qmt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 5px; }
.qmt-l { flex: 0 0 52px; font-size: 15px; color: #7a5a30; }
.qmt-line { font-size: 16px; color: #4a2a0a; margin-right: 4px; }
.qmt-b { font: 15px var(--sans); line-height: 1.1; color: #3a2610; background: linear-gradient(#f2e2b8, #d8c08a); border: 1px solid #8a6a2a; border-radius: 2px; padding: 1px 7px; cursor: pointer; box-shadow: 0 1px 0 rgba(60, 30, 0, 0.35); }
.qmt-b:hover { background: linear-gradient(#fff0c8, #e6cc92); color: #1a0e00; }
.qmt-b.warn { color: #7a1a08; border-color: #a0482a; }
.qmt-sc { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- The Social window (social.js, guildwin.js): friends, ignore, who, the
   guild and the party, in the quest log's dress: a dark well for lists, a
   parchment card for the one picked -- */
#social-win { z-index: 21; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 900px; height: 660px; max-width: calc((100vw - 24px) / var(--ui)); max-height: calc((100vh - 24px) / var(--ui)); display: flex; flex-direction: column; padding: 0; }
#social-win.hidden { display: none; }
.sw-head, .sw-tabs, .sw-foot, .gw-top, .gw-tools, .gw-foot2, .gw-card, .sw-search, .sw-bar, .sw-add, .sw-group, .sw-thead { flex-shrink: 0; }
.sw-head { position: relative; display: flex; align-items: center; justify-content: center; height: 42px; margin: 0 0 6px; background: linear-gradient(rgba(70, 40, 10, 0.55), rgba(30, 18, 6, 0.55)); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 -2px 0 rgba(255, 220, 140, 0.15); }
.sw-title { font-family: var(--display); font-size: 24px; letter-spacing: 0.06em; color: #ffd84a; text-shadow: 2px 2px 0 #000; }
.sw-head .x { top: 6px; right: 8px; }
.sw-crest { position: absolute; left: 10px; top: 4px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6a5a3a, #2a1e10); box-shadow: 0 0 0 2px #000, 0 0 0 4px #b08a44, 0 0 0 5px #000; display: flex; align-items: center; justify-content: center; }
.sw-crest canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.sw-tabs { display: flex; gap: 6px; padding: 0 6px 8px; }
.sw-tabs button { font: 19px var(--sans); color: #c8b890; padding: 1px 14px; background: rgba(0, 0, 0, 0.45); border: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px #4e4a40; cursor: pointer; text-shadow: 1px 1px 0 #000; }
.sw-tabs button:hover { color: #f8e8b0; }
.sw-tabs button.on { color: #ffe7a0; background: rgba(110, 80, 30, 0.6); box-shadow: 0 0 0 2px #000, 0 0 0 3px #b08a44; }
.sw-tabs button i { font-style: normal; color: #8fd08a; font-size: 16px; }
.sw-tabs button.on i { color: #b8f0a8; }
.sw-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 0 4px; font: 18px var(--sans); color: #efe4c8; }
.sw-foot { display: flex; align-items: center; gap: 10px; padding: 6px 6px 2px; min-height: 30px; font: 17px var(--sans); }
#sw-status { flex: 1 1 auto; color: #c8e8a0; }
#sw-status.bad { color: #ff9a8a; }
.sw-keys { color: #8a7e66; font-size: 15px; }
.sw-split { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; }
.sw-col { flex: 0 0 44%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* the lists: a dark well */
.sw-list, .sw-table, .gw-newslist, .gw-list { background: rgba(8, 7, 6, 0.72); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px #000; }
.sw-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 2px; }
.sw-list.plain { flex: 0 1 auto; }
.sw-group { padding: 2px 8px 2px; color: #e8dcc0; font-size: 17px; }
.sw-group i, .gw-rhead i { font-style: normal; color: #8a7e66; margin-left: 4px; }
.sw-row { display: flex; align-items: center; gap: 8px; padding: 3px 8px; cursor: pointer; user-select: none; }
.sw-row:hover, .sw-trow:hover { background: rgba(255, 216, 74, 0.08); }
.sw-row.sel, .sw-trow.sel { background: linear-gradient(90deg, rgba(255, 200, 40, 0.42), rgba(255, 200, 40, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 230, 140, 0.5), inset 0 -1px 0 rgba(120, 80, 0, 0.6); }
.sw-who { flex: 1 1 auto; min-width: 0; line-height: 1; }
.sw-name { color: #f4eedc; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-name i { font-style: normal; color: #8a7e66; font-size: 15px; }
.sw-row:not(.on) .sw-name { color: #a89e88; }
.sw-sub { color: #a8a088; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.sw-row.on .sw-sub { color: #c8d8a8; }
.sw-note { color: #d8c890; }
.sw-dot { flex: 0 0 auto; width: 10px; height: 10px; background: #4a4438; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px #000; }
.sw-dot.on { background: #5aff7a; box-shadow: 0 0 4px #3ad85a, 0 0 0 1px #0a3a10; }
.sw-mute { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px #c0402a; background: linear-gradient(45deg, transparent 44%, #c0402a 44% 56%, transparent 56%); }
.sw-lead { flex: 0 0 auto; width: 10px; color: #ffd84a; font-size: 14px; line-height: 10px; text-align: center; }
.sw-lvl { flex: 0 0 auto; min-width: 30px; padding: 0 5px; text-align: center; color: #ffe7a0; font-size: 17px; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 1px #000, 0 0 0 2px #5e4a2a; }
.sw-lvl.none { color: #8a7e66; }
.sw-racts { display: flex; gap: 4px; }
.sw-racts .btn.small, .sw-acts .btn.small, .gw-foot2 .btn.small, .sw-add .btn.small, .sw-search .btn.small, #social-win .gw-row .btn.small { font-weight: 400; font-size: 17px; padding: 2px 10px; }
.sw-empty { padding: 14px 12px; color: #a89a7a; text-align: center; line-height: 1.15; }
/* adding by name */
.sw-add { display: flex; gap: 6px; align-items: center; }
#social-win input:not([type='checkbox']), #social-win textarea { font: 19px var(--sans); color: #f4eedc; background: rgba(14, 13, 11, 0.85); border: 0; padding: 3px 8px; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #6e6a60; outline: none; min-width: 0; user-select: text; -webkit-user-select: text; }
#social-win input:focus, #social-win textarea:focus { box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #b08a44, 0 0 0 1px #b08a44; }
.sw-add input { flex: 1 1 auto; }
#social-win textarea { width: 100%; resize: none; line-height: 1.1; }
#social-win .btn.sure.armed { color: #ffb0a0; box-shadow: inset 0 0 0 2px #c0402a; }
#social-win .btn.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
#social-win .btn:disabled { filter: grayscale(1) brightness(0.6); cursor: default; }
/* the card: parchment, in ink */
.sw-card { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 12px 18px 14px; color: #3a2610; text-shadow: none; background: radial-gradient(ellipse at 50% 40%, rgba(255, 248, 220, 0.5), rgba(255, 248, 220, 0) 70%), repeating-linear-gradient(0deg, rgba(120, 80, 30, 0.05) 0 2px, rgba(0, 0, 0, 0) 2px 5px), linear-gradient(160deg, #ecdcb0, #d8c08a 55%, #c4a468); box-shadow: inset 0 0 0 2px #5a3a14, inset 0 0 26px rgba(90, 50, 10, 0.55), 0 0 0 2px #000; font-size: 19px; line-height: 1.15; }
.sw-card h3 { margin: 0 0 8px; font-family: var(--display); font-size: 21px; color: #4a1e08; font-weight: 400; }
.sw-card p { margin: 0 0 8px; }
.sw-card .muted { color: #6a5030; }
.sw-card b { color: #4a1e08; font-weight: 400; }
.sw-big { font-family: var(--display); font-size: 24px; color: #4a1e08; margin-bottom: 4px; }
.sw-big i { font-style: normal; font-family: var(--sans); font-size: 16px; color: #6a5030; }
.sw-line { margin: 2px 0; }
.sw-label { margin: 12px 0 4px; font-family: var(--display); font-size: 15px; letter-spacing: 0.04em; color: #e8c060; }
.sw-card .sw-label { color: #5a2a0a; border-bottom: 1px solid rgba(90, 42, 10, 0.35); }
.sw-card input:not([type='checkbox']) { color: #2a1a08 !important; background: rgba(255, 250, 230, 0.6) !important; box-shadow: inset 2px 2px 0 rgba(90, 50, 10, 0.55), inset -1px -1px 0 rgba(255, 255, 255, 0.6) !important; }
.sw-card input::placeholder { color: #8a7050; }
.sw-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.sw-acts.end { justify-content: flex-end; margin-top: 4px; }
.sw-help.wide { padding: 14px 18px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5); }
.sw-help.wide h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 21px; color: #ffd84a; }
.sw-help.wide p { margin: 0 0 8px; }
/* Who: the search, then a table */
.sw-search { display: flex; gap: 12px; align-items: center; padding: 2px 4px 4px; }
.sw-search label { display: flex; align-items: center; gap: 6px; color: #e8c060; white-space: nowrap; }
.sw-search label span { color: #a89a7a; }
.sw-search input { width: 112px; }
.sw-search input.num { width: 42px; text-align: center; }
.sw-search .btn:first-of-type { margin-left: auto; }
.sw-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sw-thead, .sw-trow { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 0 8px; }
.sw-thead { padding-top: 3px; padding-bottom: 3px; background: linear-gradient(rgba(70, 40, 10, 0.6), rgba(30, 18, 6, 0.6)); box-shadow: 0 2px 0 #000; }
.sw-th { font: 17px var(--sans); color: #c8b890; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-shadow: 1px 1px 0 #000; }
.sw-th:hover { color: #fff; }
.sw-th.on { color: #ffd84a; }
.sw-th.on::after { content: ' \25BE'; font-size: 13px; }
.sw-tbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 0; }
.sw-trow { min-height: 24px; cursor: pointer; user-select: none; font-size: 18px; }
.sw-trow.me .sw-tname { color: #ffe7a0; }
.sw-tname { color: #f4eedc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-star { font-style: normal; color: #ffd84a; margin-right: 4px; }
.sw-mod { font-style: normal; font-size: 13px; color: #8ab8ff; }
.sw-tlvl { color: #ffe7a0; text-align: center; }
.sw-tcell { font-size: 17px; color: #c8d8a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-tcell.g { color: #d8c890; }
.sw-ign { font-style: normal; font-size: 13px; color: #ff9a8a; margin-left: 4px; }
.sw-bar { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.sw-bar .sw-acts { margin: 0 0 0 auto; }
.sw-count { color: #c8b890; }
/* the chat's names and links */
#chat-log .who { cursor: pointer; }
#chat-log .who:hover { text-decoration: underline; }
#chat-log .friend { color: #9ef0a0; }
#chat-log .chat-link { font: inherit; color: #ffd84a; background: rgba(0, 0, 0, 0.45); border: 0; box-shadow: 0 0 0 1px #b08a44; padding: 0 6px; cursor: pointer; text-shadow: 1px 1px 0 #000; }
#chat-log .chat-link:disabled { color: #8a7e66; box-shadow: 0 0 0 1px #4e4a40; cursor: default; }
/* the Guild tab */
.sw-body.guild { gap: 4px; }
.gw-top { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.gw-banner { padding: 0 4px; }
.gw-gtitle { font-family: var(--display); font-size: 22px; color: #ffd84a; text-shadow: 2px 2px 0 #000; line-height: 1.1; }
.gw-gline { color: #c8b890; font-size: 16px; }
.gw-subs { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; padding: 2px 2px 4px; }
.gw-subs button { font: 17px var(--sans); color: #c8b890; padding: 0 9px; background: rgba(0, 0, 0, 0.45); border: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px #3e3a32; cursor: pointer; text-shadow: 1px 1px 0 #000; }
.gw-subs button:hover { color: #f8e8b0; }
.gw-subs button.on { color: #ffe7a0; background: rgba(110, 80, 30, 0.6); box-shadow: 0 0 0 2px #000, 0 0 0 3px #b08a44; }
.gw-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 4px; }
.gw-page.roster { display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.gw-page .gw-motd { margin: 0; font-size: 17px; }
.gw-page .gw-motd b { color: var(--gold); font-weight: 400; }
.gw-tools { display: flex; align-items: center; gap: 12px; }
.gw-tools input#gw-filter { width: 190px; }
.gw-check { display: flex; align-items: center; gap: 5px; color: #e8dcc0; cursor: pointer; }
.gw-check input { accent-color: #b08a44; width: 15px; height: 15px; }
.gw-count { margin-left: auto; color: #c8b890; }
.gw-table .sw-thead, .gw-table .sw-trow { grid-template-columns: 12px minmax(0, 1.05fr) 96px 46px minmax(0, 1.25fr) 66px minmax(0, 1.25fr); }
.gw-mrow:not(.on) .sw-tname { color: #a89e88; }
.gw-mrow:not(.on) .gw-rank { opacity: 0.7; }
.gw-mrow .gw-rank { font-size: 16px; }
.gw-where { color: #c8d8a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.gw-mrow:not(.on) .gw-where, .gw-seen { color: #8a8270; font-size: 16px; }
.gw-mrow.on .gw-seen { color: #8fd08a; }
.gw-mnote { color: #d8c890; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.gw-onote-mark { font-style: normal; color: #8ab8ff; }
.gw-card { flex: 0 0 auto; display: flex; gap: 16px; padding: 8px 14px; color: #3a2610; text-shadow: none; background: repeating-linear-gradient(0deg, rgba(120, 80, 30, 0.05) 0 2px, rgba(0, 0, 0, 0) 2px 5px), linear-gradient(160deg, #ecdcb0, #d8c08a 55%, #c4a468); box-shadow: inset 0 0 0 2px #5a3a14, inset 0 0 20px rgba(90, 50, 10, 0.5), 0 0 0 2px #000; min-height: 118px; }
.gw-card.empty { align-items: center; justify-content: center; min-height: 0; padding: 10px; }
.gw-card.empty .muted { color: #6a5030; }
.gw-card .sw-big { font-size: 21px; }
.gw-card .muted { color: #6a5030; }
.gw-card b { color: #4a1e08; font-weight: 400; }
.gw-cardl { flex: 0 0 40%; min-width: 0; }
.gw-cardr { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gw-cardr .sw-acts { margin-top: auto; padding-top: 4px; }
.gw-nrow { display: flex; align-items: center; gap: 6px; }
.gw-nrow .sw-label { flex: 0 0 74px; margin: 0; border: 0; color: #5a2a0a; font-size: 14px; }
.gw-nrow input { flex: 1 1 auto; color: #2a1a08 !important; background: rgba(255, 250, 230, 0.6) !important; box-shadow: inset 2px 2px 0 rgba(90, 50, 10, 0.55), inset -1px -1px 0 rgba(255, 255, 255, 0.6) !important; }
.gw-ntext { flex: 1 1 auto; }
.gw-card .gw-rank.leader { color: #8a5a00; }
.gw-card .gw-rank.officer { color: #5a3a10; }
.gw-card .gw-rank.member { color: #4a3a20; }
.gw-foot2 { display: flex; align-items: center; gap: 6px; }
.gw-foot2 input { width: 240px; }
.gw-grow { flex: 1 1 auto; }
.gw-cols { display: flex; gap: 14px; }
.gw-colmain { flex: 1 1 auto; min-width: 0; }
.gw-colside { flex: 0 0 290px; }
.gw-infotext { padding: 8px 12px; min-height: 120px; line-height: 1.15; color: #3a2610; text-shadow: none; background: linear-gradient(160deg, #ecdcb0, #d8c08a 55%, #c4a468); box-shadow: inset 0 0 0 2px #5a3a14, inset 0 0 20px rgba(90, 50, 10, 0.5), 0 0 0 2px #000; }
.gw-fact { display: flex; justify-content: space-between; gap: 10px; padding: 2px 6px; background: rgba(0, 0, 0, 0.25); margin-bottom: 2px; }
.gw-colours { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; color: #d8ccb0; font-size: 13px; }
.gw-colours b { color: #f4eedc; font-weight: 600; }
.gw-tabard { position: relative; width: 30px; height: 40px; flex: none; background: var(--e); clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%); }
.gw-tabard i { position: absolute; inset: 3px 3px 5px; background: var(--f); clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%); }
.gw-swrow { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.gw-swrow span { width: 46px; flex: none; font-size: 12px; color: #a89a7a; }
.gw-sw { width: 16px; height: 16px; flex: none; padding: 0; border: 1px solid #000; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.gw-sw.on { outline: 2px solid var(--gold); outline-offset: 1px; }
.gw-sw[disabled]:not(.on) { opacity: 0.3; cursor: default; }
.gw-fact span { color: #a89a7a; }
.gw-fact b { color: #f4eedc; font-weight: 400; text-align: right; }
.gw-newslist { padding: 4px 8px 8px; }
.gw-day { margin: 8px 0 2px; font-family: var(--display); font-size: 14px; letter-spacing: 0.04em; color: #e8c060; border-bottom: 1px solid rgba(232, 192, 96, 0.25); }
.gw-news { display: flex; gap: 10px; padding: 1px 0; line-height: 1.1; }
.gw-time { flex: 0 0 auto; min-width: 54px; color: #8a7e66; }
.gw-ranks { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.gw-rrow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px 150px; align-items: center; padding: 3px 8px; background: rgba(0, 0, 0, 0.25); }
.gw-rrow > :not(:first-child) { justify-self: center; }
.gw-rhead { background: linear-gradient(rgba(70, 40, 10, 0.6), rgba(30, 18, 6, 0.6)); }
.gw-rhead b { font-weight: 400; color: #ffd84a; }
.gw-tick { width: 24px; height: 22px; padding: 0; font: 18px var(--sans); line-height: 20px; color: #7aff5a; background: rgba(0, 0, 0, 0.55); border: 0; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5e4a2a; text-align: center; cursor: pointer; }
.gw-tick:hover { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd84a; }
.gw-tick.ro { cursor: default; color: #7a7262; background: none; box-shadow: none; }
.gw-tick.ro.on { color: #7aff5a; }
#social-win .gw-help { font-size: 18px; }
#social-win .gw-list { padding: 4px; max-height: none; }
@media (max-width: 760px) {
  .sw-split { flex-direction: column; }
  .sw-col { flex: 1 1 55%; }
  .gw-table .sw-thead, .gw-table .sw-trow { grid-template-columns: 12px minmax(0, 1fr) 80px 40px minmax(0, 1fr) 56px; }
  .gw-table .gw-mnote, .gw-table .sw-thead > :last-child { display: none; }
  .gw-cols { flex-direction: column; }
  .gw-colside { flex: 0 0 auto; }
}
.sw-bar .sw-add { flex: 1 1 auto; max-width: 520px; }
.sw-pnote { margin: 4px 2px 0; font-size: 16px; }
.sw-card { display: flex; flex-direction: column; }
.sw-card .sw-tip { margin: auto 0 0; padding-top: 14px; font-size: 16px; border-top: 1px solid rgba(90, 42, 10, 0.25); }

/* -- The Royal Herald's book: the Social window's Crown page (crown.js),
   its own small tabs along the top -- */
.gw-page.crown { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.cw-ctabs { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cw-ctabs button { font: 17px var(--sans); color: #e8dcc0; padding: 1px 12px; background: rgba(60, 40, 12, 0.55); border: 0; border-radius: 10px; box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 230, 160, 0.15); cursor: pointer; text-shadow: 1px 1px 0 #000; }
.cw-ctabs button:hover { color: #fff; }
.cw-ctabs button.on { color: #2a1a08; text-shadow: none; background: linear-gradient(#fff0a0, #d39a22); box-shadow: 0 0 0 2px #000; }
.cw-ctabs button i { font-style: normal; color: #8fd08a; font-size: 15px; }
.cw-ctabs button.on i { color: #2a5a10; }
.cw-clock { margin-left: auto; color: #8a7e66; font-size: 15px; }
.gw-page.crown input.cw-num { width: 64px; flex: 0 0 auto; text-align: center; }
.gw-page.crown input { border-radius: 0; -moz-appearance: textfield; }
.gw-page.crown input::-webkit-inner-spin-button { -webkit-appearance: none; }
.gw-page.crown .sw-add input:not(.cw-num) { flex: 1 1 auto; }
.gw-page.crown .btn { white-space: nowrap; }
.gw-page.crown .sw-add span { color: #5a3a14; }
.cw-split { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; }
.cw-split .sw-card { padding: 10px 14px; }
.cw-split > .sw-card { flex: 0 0 38%; }
.cw-split > .sw-card.cw-part { flex: 0 0 34%; }
.cw-side, .cw-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cw-col .sw-list { flex: 1 1 auto; }
.cw-king { font-family: var(--display); font-size: 26px; color: #4a1e08; line-height: 1.1; }
.cw-you { margin-bottom: 6px; padding: 3px 8px; background: rgba(140, 90, 10, 0.18); box-shadow: inset 0 0 0 1px rgba(90, 50, 10, 0.4); }
.cw-pasts { display: flex; flex-direction: column; gap: 2px; }
.cw-past { display: flex; gap: 10px; align-items: baseline; }
.cw-past span { flex: 0 0 64px; color: #6a5030; }
.cw-past i { font-style: normal; color: #6a5030; margin-left: auto; }
.cw-rule { font-size: 16px; line-height: 1.15; color: #c8b890; padding: 0 2px; }
/* the month's road */
.cw-road { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(8, 7, 6, 0.72); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px #000; flex-shrink: 0; }
.cw-step { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 3px 6px; opacity: 0.7; }
.cw-step.on { opacity: 1; background: linear-gradient(90deg, rgba(255, 200, 40, 0.32), rgba(255, 200, 40, 0.05)); box-shadow: inset 0 1px 0 rgba(255, 230, 140, 0.4); }
.cw-step.past { opacity: 0.45; }
.cw-num { flex: 0 0 auto; width: 24px; height: 24px; line-height: 23px; text-align: center; border-radius: 50%; color: #2a1a08; background: radial-gradient(circle at 40% 35%, #fff0a0, #d39a22 60%, #8a6a08); box-shadow: 0 0 0 2px #000; font-size: 16px; text-shadow: none; }
.cw-step:not(.on) .cw-num { background: radial-gradient(circle at 40% 35%, #b8ae98, #6e6a60); }
.cw-sname { color: #f4eedc; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-step.on .cw-sname { color: #ffe7a0; }
.cw-swhen { color: #a89a7a; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-arrow { color: #6e6a60; font-size: 14px; flex: 0 0 auto; }
/* the four seats */
.cw-seats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; flex-shrink: 0; }
.cw-seat { display: flex; gap: 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.06); min-width: 0; }
.cw-seat.held { background: rgba(70, 50, 14, 0.4); }
.cw-shield { flex: 0 0 auto; width: 26px; height: 32px; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35); background: #4a4438; }
.cw-seat.swamp .cw-shield, .cw-pill.swamp { background: linear-gradient(#5a8a4a, #2e5a24); }
.cw-seat.forest .cw-shield, .cw-pill.forest { background: linear-gradient(#3a7a3a, #1a4a1a); }
.cw-seat.ash .cw-shield, .cw-pill.ash { background: linear-gradient(#b0482a, #6a1e10); }
.cw-seat.frost .cw-shield, .cw-pill.frost { background: linear-gradient(#7ab0d8, #3a6a98); }
.cw-seat:not(.held) .cw-shield { filter: grayscale(0.7) brightness(0.7); }
.cw-sbody { min-width: 0; line-height: 1.1; }
.cw-stitle { color: #ffd84a; font-family: var(--display); font-size: 15px; letter-spacing: 0.03em; }
.cw-sline { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
.cw-sline b { color: #f4eedc; font-weight: 400; }
.cw-sline.small { font-size: 15px; color: #a89a7a; }
/* the vote */
.cw-cand { display: flex; align-items: center; gap: 4px 10px; padding: 4px 8px; flex-wrap: wrap; }
.cw-cand + .cw-cand { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.cw-cand.me .cw-cname { color: #ffe7a0; }
.cw-cname { flex: 0 0 150px; font-size: 19px; color: #f4eedc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-cand:not(.stands) .cw-cname { color: #a89e88; }
.cw-cspons { display: flex; gap: 4px; flex: 1 1 auto; font-size: 15px; }
.cw-pill { padding: 0 6px; font-size: 14px; color: #fff; box-shadow: 0 0 0 1px #000; }
.cw-votes { display: flex; align-items: center; gap: 6px; flex: 0 0 120px; color: #ffe7a0; }
.cw-bar { flex: 1 1 auto; height: 8px; background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 1px #000; }
.cw-bar i { display: block; height: 100%; background: linear-gradient(#ffd84a, #b08a44); }
.cw-cacts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1 0 100%; justify-content: flex-end; }
.cw-cacts:empty { display: none; }
.cw-voted { color: #7aff5a; font-size: 16px; }
.sw-card .cw-voted { color: #2a6a10; }
/* the King's and the lords' pages */
.cw-decree { padding: 8px 12px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5); }
.cw-decree.on { box-shadow: inset 0 0 0 2px #b08a44; }
.cw-decree .sw-acts { margin-top: 6px; }
.cw-purse { font-size: 24px; color: #6a4a08; font-weight: 400; }
.cw-lords { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; overflow-y: auto; }
.cw-link { color: #2a3a8a; cursor: pointer; text-decoration: underline; }
.cw-split > .sw-card.cw-throne { flex: 0 0 33%; }
.cw-swhen { font-size: 14px; }
.cw-road { gap: 4px; padding: 6px 6px; }
.cw-step { padding: 3px 5px; gap: 6px; }
.sw-card.cw-throne .sw-label:first-child, .cw-split .sw-card > .sw-label:first-child { margin-top: 0; }
.gw-page.crown .btn.small { font-weight: 400; font-size: 17px; padding: 2px 10px; }
/* not in a guild: founding one, a line over the list of guilds (guildwin.js) */
.gw-page.guilds { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.gw-page.guilds .gw-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.gw-found { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 17px; color: #e8dcc0; background: rgba(60, 40, 12, 0.45); box-shadow: inset 0 0 0 1px rgba(176, 138, 68, 0.5); }
.gw-found b { color: var(--gold); font-weight: 400; }
.gw-found input { flex: 1 1 auto; }
.gw-flag { color: #e0402a; font-size: 18px; }
.gw-lhead { flex-shrink: 0; color: #e8dcc0; font-size: 17px; padding: 2px 2px 0; }
.gw-lhead i { font-style: normal; color: #8a7e66; margin-left: 4px; }
.gw-found .btn.small { font-weight: 400; font-size: 17px; padding: 2px 10px; white-space: nowrap; }

/* An explainer's lesson, heard again or read, in a window of their own
   (quests.js lessonButtons: the Keeper of the Pens, the Mod Sea) */
.lesson-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
/* A lesson read back (quests.js showLesson) */
.qd-lesson h4 { margin-top: 0; }
.qd-lesson p { margin: 0 0 8px; }

/* The Arcanum's pedestals: what the spell does, under the prompt (magicarena.js) */
#arena-hint { text-align: center; max-width: 520px; }
#arena-hint .sp { font-weight: bold; }
#arena-hint .tip { display: block; margin-top: 3px; font-size: 13px; color: #d8c8a8; white-space: normal; }

/* -- The Legend, the prologue (legendui.js) -- */
body.legend-on #chat, body.legend-on #quest-tracker, body.legend-on #party-frames { opacity: 0; pointer-events: none; transition: opacity 0.6s; }
#legend { position: fixed; inset: 0; pointer-events: none; z-index: 62; font-family: var(--sans); }
#legend kbd { display: inline-block; min-width: 26px; padding: 0 7px; margin: 0 3px; border: 2px solid #a8a498; border-bottom-width: 4px; border-radius: 3px; background: #2a2620; color: #fff2c8; font: 700 16px/22px var(--sans); text-align: center; vertical-align: 1px; box-shadow: 0 0 0 1px #000; }
#legend .lg-mouse { display: inline-block; width: 17px; height: 24px; margin: 0 4px; vertical-align: -5px; border: 2px solid #a8a498; border-radius: 9px 9px 8px 8px; background: #2a2620; position: relative; box-shadow: 0 0 0 1px #000; }
#legend .lg-mouse::before { content: ''; position: absolute; top: 0; height: 10px; width: 50%; background: #ffd24a; }
#legend .lg-mouse.l::before { left: 0; border-radius: 7px 0 0 0; }
#legend .lg-mouse.r::before { right: 0; border-radius: 0 7px 0 0; }
#legend .lg-mouse.m::before { display: none; }
#legend .lg-mouse.m::after { content: '\2194'; position: absolute; left: 50%; top: -18px; transform: translateX(-50%); color: #ffd24a; font-size: 15px; text-shadow: 0 1px 2px #000; }
#lg-prompts { position: absolute; left: 50%; bottom: 168px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; width: min(720px, 92vw); }
/* (lifted clear of a siege engine's own panel while it is worked) */
#lg-prompts.lift { bottom: 236px; }
.lg-prompt { background: rgba(10, 8, 14, 0.84); box-shadow: 0 0 0 2px #000, 0 0 0 4px #8a7a4a, 0 6px 18px rgba(0, 0, 0, 0.6); padding: 9px 18px 8px; color: #f6ecd2; font-size: 19px; line-height: 30px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.35s; text-shadow: 1px 1px 0 #000; }
.lg-prompt.in { opacity: 1; transform: none; }
.lg-prompt.done { opacity: 0; transform: translateY(-14px) scale(0.96); box-shadow: 0 0 0 2px #000, 0 0 0 4px #ffd24a; }
.lg-prompt.out { opacity: 0; }
.lg-prompt.ding { box-shadow: 0 0 0 2px #000, 0 0 0 4px #ffd24a, 0 0 22px rgba(255, 210, 74, 0.6); }
.lg-prompt.pulse { animation: lgPulse 1.1s ease-in-out infinite; }
@keyframes lgPulse { 0%, 100% { box-shadow: 0 0 0 2px #000, 0 0 0 4px #8a7a4a; } 50% { box-shadow: 0 0 0 2px #000, 0 0 0 4px #ffd24a, 0 0 26px rgba(255, 210, 74, 0.75); transform: scale(1.04); } }
.lg-p-count { font-size: 15px; line-height: 20px; color: #e8dcb8; letter-spacing: 0.5px; }
.lg-p-count b { color: #ffd24a; }
.lg-p-pips { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.lg-p-pips i { width: 9px; height: 9px; background: #3a3428; box-shadow: 0 0 0 1px #000; transform: rotate(45deg); }
.lg-p-pips i.on { background: #ffd24a; box-shadow: 0 0 0 1px #000, 0 0 8px #ffb000; }
#lg-purse { position: absolute; left: 22px; bottom: 26px; display: flex; align-items: baseline; gap: 8px; padding: 8px 16px 8px 10px; background: rgba(10, 8, 14, 0.8); box-shadow: 0 0 0 2px #000, 0 0 0 4px #8a7a4a; opacity: 0; transition: opacity 0.6s; }
#lg-purse.in { opacity: 1; }
#lg-purse .lg-coin { width: 22px; height: 22px; align-self: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff0a0, #e0a020 55%, #8a5a08); box-shadow: 0 0 0 2px #3a2400; }
#lg-purse .lg-gold { font: 900 26px var(--serif); color: #ffd24a; text-shadow: 0 2px 0 #3a1a02; min-width: 1ch; }
#lg-purse .lg-gold-sub { font: 600 14px var(--serif); color: #c8b07a; letter-spacing: 0.08em; }
#lg-purse .lg-purse-tag { position: absolute; left: 0; bottom: calc(100% + 8px); white-space: nowrap; font: italic 15px Georgia, serif; color: #e8dcc0; text-shadow: 0 1px 3px #000; }
.lg-purse-d { position: absolute; right: -6px; top: -8px; font: 900 20px var(--serif); animation: lgCoin 1.8s ease-out forwards; text-shadow: 0 2px 2px #000; }
.lg-purse-d.up { color: #ffe070; }
.lg-purse-d.down { color: #ff8a6a; }
@keyframes lgCoin { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
#lg-sub { position: absolute; left: 50%; bottom: calc(240px + 2vh); transform: translateX(-50%); width: min(860px, 90vw); text-align: center; opacity: 0; transition: opacity 0.3s; }
body.cinematic #lg-sub { bottom: calc(11vh + 26px); }
#lg-sub.in { opacity: 1; }
#lg-sub .lg-who { font: 700 13px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #ffd277; margin-bottom: 4px; text-shadow: 0 1px 3px #000; }
#lg-sub .lg-say { font: 600 23px/1.38 Georgia, serif; color: #f6ecd6; text-shadow: 0 2px 4px #000, 0 0 12px #000; }
#lg-sub .lg-say.narr { font-style: italic; color: #f1e3bd; }
#lg-choice { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.78)); opacity: 0; pointer-events: none; transition: opacity 0.4s; z-index: 3; }
#lg-choice.in { opacity: 1; pointer-events: auto; }
.lg-c-title { font: 900 34px var(--serif); color: #ffd24a; text-shadow: 0 3px 0 #3a1a02, 0 0 20px #000; text-align: center; padding: 0 20px; }
.lg-cards { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; padding: 0 16px; }
.lg-card { width: 250px; min-height: 230px; padding: 18px 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; font-family: var(--sans); color: #3a2a14; background: linear-gradient(#efe0b8, #d9c08a); border: 0; box-shadow: 0 0 0 3px #3a2a10, 0 0 0 6px #b8952a, 0 10px 30px rgba(0, 0, 0, 0.7); transition: transform 0.18s, box-shadow 0.18s, opacity 0.5s; }
.lg-card:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 0 0 3px #3a2a10, 0 0 0 6px #ffd24a, 0 16px 36px rgba(0, 0, 0, 0.75); }
.lg-card.picked { transform: scale(1.08); box-shadow: 0 0 0 3px #3a2a10, 0 0 0 6px #ffd24a, 0 0 40px rgba(255, 210, 74, 0.9); }
.lg-card.gone { opacity: 0.15; transform: scale(0.94); }
.lg-c-key kbd { background: #3a2a14 !important; }
.lg-c-name { font: 900 21px/1.2 var(--serif); color: #4a1a08; text-align: center; }
.lg-c-body { font-size: 18px; line-height: 1.35; text-align: center; flex: 1; }
.lg-c-cost { font: 700 15px var(--serif); color: #7a2a10; border-top: 1px solid rgba(90, 60, 20, 0.4); padding-top: 8px; width: 100%; text-align: center; }
#lg-title { position: absolute; top: 24%; width: 100%; text-align: center; opacity: 0; transition: opacity 1.2s; }
#lg-title.in { opacity: 1; }
.lg-t-num { font: 700 24px var(--serif); letter-spacing: 0.5em; color: #c8a858; text-shadow: 0 2px 4px #000; margin-bottom: 6px; padding-left: 0.5em; }
.lg-t-name { font: 900 64px var(--serif); color: #ffd24a; letter-spacing: 0.06em; text-shadow: 0 4px 0 #3a1a02, 0 0 30px rgba(0, 0, 0, 0.9); }
.lg-t-sub { font: italic 24px Georgia, serif; color: #f0e2bc; text-shadow: 0 2px 6px #000; margin-top: 6px; }
#lg-black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 4; display: flex; align-items: center; justify-content: center; }
.lg-b-lines { display: flex; flex-direction: column; gap: 22px; align-items: center; padding: 0 8vw; text-align: center; }
.lg-b-line { font: 600 26px/1.4 Georgia, serif; color: #e8dcc0; opacity: 0; transform: translateY(6px); transition: opacity 1.2s, transform 1.2s; }
.lg-b-line.in { opacity: 1; transform: none; }
.lg-b-line.big { font: 900 34px var(--serif); color: #ffd24a; letter-spacing: 0.03em; }
.lg-b-line.small { font-size: 21px; color: #c8bc9c; }
.lg-b-line b { color: #ffd24a; font-weight: 700; }
#lg-lids { position: absolute; inset: 0; z-index: 5; display: none; }
#lg-lids > div { position: absolute; left: -2vw; right: -2vw; height: 50.5vh; background: #000; }
#lg-lids .top { top: 0; border-radius: 0 0 50% 50% / 0 0 18% 18%; }
#lg-lids .bot { bottom: 0; border-radius: 50% 50% 0 0 / 18% 18% 0 0; }
#lg-flash { position: absolute; inset: 0; background: #fffbe8; opacity: 0; z-index: 6; }
#lg-menu { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); pointer-events: auto; z-index: 7; }
#lg-menu.in { display: flex; }
.lg-m-card { width: min(420px, 92vw); padding: 22px 26px; background: var(--panel); box-shadow: 0 0 0 2px #000, 0 0 0 4px #8a7a4a, 0 14px 40px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; gap: 9px; }
.lg-m-title { font: 900 30px var(--serif); color: #ffd24a; text-align: center; }
.lg-m-sub { font: italic 17px Georgia, serif; color: #c8b98f; text-align: center; margin-bottom: 6px; }
.lg-m-go { width: 100%; }
.lg-m-list-h { font: 700 13px var(--serif); letter-spacing: 0.14em; color: #a89060; margin-top: 8px; text-transform: uppercase; }
.lg-m-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lg-m-ch { font-size: 14px; }
.lg-m-ch.at { box-shadow: 0 0 0 2px #ffd24a; }
.lg-m-ch[disabled] { opacity: 0.4; cursor: default; }
.lg-m-foot { font-size: 14px; color: var(--muted); margin-top: 8px; text-align: center; }
.lg-m-go:focus-visible, .lg-m-ch:focus-visible, .lg-q-btns .btn:focus-visible { outline: 2px solid #ffd24a; outline-offset: 2px; }
/* the skip asked again, over the menu */
#lg-ask { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); pointer-events: auto; z-index: 8; }
#lg-ask.in { display: flex; }
.lg-q-card { width: min(380px, 90vw); padding: 20px 24px; background: var(--panel); box-shadow: 0 0 0 2px #000, 0 0 0 4px #8a7a4a, 0 14px 40px rgba(0, 0, 0, 0.7); text-align: center; }
.lg-q-title { font: 900 24px var(--serif); color: #ffd24a; }
.lg-q-body { font-size: 16px; color: var(--text, #e8dcc0); margin: 10px 0 16px; line-height: 1.4; }
.lg-q-btns { display: flex; gap: 10px; justify-content: center; }
.lg-q-btns .btn { min-width: 110px; }
#lg-corner { position: absolute; right: 18px; bottom: 14px; font-size: 14px; color: #c8bc9c; opacity: 0; transition: opacity 0.6s; text-shadow: 1px 1px 0 #000; }
#lg-corner.in { opacity: 0.75; }
#lg-corner kbd { font-size: 12px !important; line-height: 18px !important; min-width: 0 !important; }
body.legend-on #hud > * { transition: opacity 1.4s; }
body.legend-hud-off #hud > *:not(#nameplates):not(#fct) { opacity: 0; pointer-events: none; }
body.legend-hud-off #nameplates { opacity: 0; }
body.lg-shot #nameplates { opacity: 0; transition: opacity 0.3s; }
#lg-tag { position: absolute; transform: translate(-50%, -100%); text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.4s; white-space: nowrap; }
#lg-tag .lg-tag-t { font: 700 15px var(--serif); color: #ffd24a; text-shadow: 0 1px 2px #000, 0 0 8px rgba(255, 180, 40, 0.6); letter-spacing: 0.04em; }
#lg-tag .lg-tag-n { font: 700 17px var(--serif); color: #f6ecd2; text-shadow: 0 1px 2px #000; }
#lg-tag.flash .lg-tag-t { animation: lgTitle 1.6s ease-out; }
@keyframes lgTitle { 0% { transform: scale(2.2); opacity: 0; filter: brightness(3); } 30% { opacity: 1; } 100% { transform: none; filter: none; } }
/* ---- The King's decrees (decrees.js, decreemod.js) ---- */
.dc-list .dc-row { padding: 6px 10px; }
.dc-list .dc-row + .dc-row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.dc-top { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.dc-title { color: #ffe7a0; font-size: 18px; }
.dc-row.undone .dc-title { color: #a89e88; text-decoration: line-through rgba(168, 158, 136, 0.6); }
.dc-state { flex: 0 0 auto; font-size: 14px; padding: 0 6px; box-shadow: 0 0 0 1px #000; color: #fff; background: #3a6a2a; }
.dc-state.undone { background: #5a4a3a; }
.dc-state.building, .dc-state.checking, .dc-state.petitioned { background: #8a6a1a; }
.dc-state.turned_down { background: #7a2a1e; }
.dc-who { color: #a89a7a; font-size: 15px; }
.dc-words { color: #e8dcc0; font-size: 16px; font-style: italic; margin-top: 2px; }
.dc-words i { color: #a89a7a; }
.dc-note { color: #b8d890; font-size: 15px; }
.dc-laws { overflow-y: auto; }
.dc-law { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; padding: 3px 0; border-bottom: 1px solid rgba(90, 58, 20, 0.25); font-size: 17px; }
.dc-law span { color: #6a5030; flex: 0 0 auto; }
.dc-law b { text-align: right; }
.dc-law.dark { border-bottom-color: rgba(255, 255, 255, 0.08); color: #e8dcc0; }
.dc-law.dark span { color: #a89a7a; }
.dc-law.dark b { color: #ffe7a0; font-weight: 400; }
.dc-rule { font-size: 15px; color: #a89a7a; margin: 6px 4px 0; }
.sw-card .dc-rule { color: #6a5030; }
.dc-undo { font-style: normal; color: #a89a7a; font-size: 13px; }
.dc-picks { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.dc-pick { font: 15px var(--sans); color: #e8dcc0; padding: 1px 8px; background: rgba(60, 40, 12, 0.55); border: 0; box-shadow: 0 0 0 1px #000; cursor: pointer; }
.dc-pick.on { color: #2a1a08; background: linear-gradient(#fff0a0, #d39a22); }
.dc-petition textarea, .dm-item textarea, .dm-list textarea, .dm-list input { width: 100%; box-sizing: border-box; margin: 6px 0 4px; font: 16px var(--sans); resize: vertical; }
.dc-turned { margin: 6px 4px 0; color: #e8b0a0; font-size: 15px; }
.dc-turned b { color: #ff9a80; font-weight: 400; }
#decree-mod-win { height: 640px; }
.dm-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 8px; }
.dm-item { padding: 8px 10px; margin: 6px 0; background: rgba(0, 0, 0, 0.3); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5); }
.dm-item.small { padding: 5px 10px; }
.dm-head { color: #a89a7a; font-size: 14px; margin-bottom: 3px; }
.dm-words { color: #f4eedc; font-style: italic; }
.dm-big { color: #ffe7a0; font-size: 19px; font-weight: 400; }
.dm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.dm-offer { padding: 6px 8px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 3px; }
.dm-offer.on { box-shadow: inset 0 0 0 1px #b08a44; }
.dm-offer b { color: #ffe7a0; font-weight: 400; }
.dm-offer .mod-tog { align-self: flex-start; }

/* FogHaven Prison (prison.js): the sentence's clock, top middle; its desk,
   games and shop's window */
#prison-clock { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); min-width: 230px; padding: 6px 18px 7px; text-align: center; background: rgba(14, 12, 10, 0.82); border: 1px solid var(--gold-dim); border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); pointer-events: none; opacity: 0; transition: opacity 0.3s; }
#prison-clock.on { opacity: 1; }
#prison-clock .pc-title { font: 12px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: #b8a888; }
#prison-clock .pc-time { font: bold 26px var(--sans); color: #f0e2c0; text-shadow: 0 1px 2px #000; line-height: 1.1; }
#prison-clock .pc-sub { font: 12px var(--sans); color: #c8bca0; }
#prison-clock .pc-flash { position: absolute; right: -64px; top: 12px; font: bold 20px var(--sans); color: #9aff8a; text-shadow: 0 1px 2px #000; opacity: 0; }
#prison-clock .pc-flash.on { animation: pc-flash 2.4s ease-out; }
@keyframes pc-flash { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
#pr-win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 80vh; }
#pr-win .qd-body { overflow-y: auto; }
#pr-win .qd-foot { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
#pr-win .pr-list { margin: 6px 0 8px 18px; padding: 0; }
#pr-win .pr-list li { margin: 2px 0; }
#pr-win .pr-cards { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
#pr-win .pr-card { width: 54px; height: 76px; border-radius: 5px; background: #f4efe2; color: #1a1a1c; font: bold 22px Georgia, serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
#pr-win .pr-card.red { color: #a8221a; }
#pr-win .pr-card.back { background: repeating-linear-gradient(45deg, #6a1a1a 0 6px, #8a2a22 6px 12px); color: transparent; }
#pr-win .pr-die { display: inline-block; width: 40px; height: 40px; margin: 4px; border-radius: 7px; background: #f0e8d4; color: #1a1a1c; font: bold 22px Georgia, serif; line-height: 40px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
#pr-win .pr-bar { position: relative; height: 18px; margin: 10px 0; background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 2px #000, 0 0 0 3px #a8a498; }
#pr-win .pr-bar i { position: absolute; top: 0; bottom: 0; background: linear-gradient(#ffe890, #d8a020); }
#pr-win .pr-bar b { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 1px #000; }
#pr-win .pr-shop { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin: 6px 0; }
#pr-win .pr-shop em { color: var(--muted); font-size: 13px; }
/* a job's own gauge (prisonjobs.js): over the use prompt */
#pr-gauge { position: absolute; left: 50%; bottom: 252px; width: 280px; height: 18px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 2px #000, 0 0 0 3px #a8a498, 0 0 0 4px #000; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
#pr-gauge.on { opacity: 1; }
#pr-gauge .zone { position: absolute; top: 0; bottom: 0; background: linear-gradient(#a8ff90, #4ab030); }
#pr-gauge .fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 232, 144, 0.35); }
#pr-gauge .needle { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 1px #000; }
#pr-gauge .marks i { position: absolute; top: 2px; bottom: 2px; width: 6px; margin-left: -3px; background: #e8dcc0; box-shadow: 0 0 0 1px #000; }
#pr-gauge .marks i.hit { background: #6aff5a; }
#pr-gauge .marks i.miss { background: #ff5a4a; }
#pr-gauge span { position: absolute; left: 0; right: 0; top: -22px; text-align: center; font: 14px var(--sans); color: #f0e2c0; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.help-legend { margin-top: 14px; }
.help-legend .help-lg { padding: 3px 0 3px 10px; font-size: 16px; line-height: 26px; }
.help-legend kbd { display: inline-block; min-width: 22px; padding: 0 6px; margin: 0 2px; border: 2px solid #a8a498; border-bottom-width: 3px; border-radius: 3px; background: #2a2620; color: #fff2c8; font: 700 14px/18px var(--sans); text-align: center; }
.help-legend .lg-mouse { display: inline-block; width: 14px; height: 20px; margin: 0 3px; vertical-align: -4px; border: 2px solid #a8a498; border-radius: 8px; background: #2a2620; position: relative; }
.help-legend .lg-mouse::before { content: ''; position: absolute; top: 0; height: 8px; width: 50%; background: #ffd24a; }
.help-legend .lg-mouse.l::before { left: 0; }
.help-legend .lg-mouse.r::before { right: 0; }
.help-legend .lg-mouse.m::before { display: none; }
body.legend-on #hint { display: none; }
body.lg-choosing #nameplates, body.lg-choosing #hud > *:not(#fct) { opacity: 0; transition: opacity 0.3s; }
body.legend-on #realm { visibility: hidden; }