/*
 * style.css — Fairyland Online web client theme.
 *
 * Evokes the original game's whimsical cartoon look: a warm parchment/green-map
 * backdrop with wood-and-brass panels and a playful serif display face. Colors
 * are tuned to stay readable on a dark fantasy palette.
 */
:root {
  --bg:        #1a1410;          /* deep umber backdrop */
  --bg-grad-a: #243018;          /* forest green */
  --bg-grad-b: #1a1410;          /* umber */
  --panel:     #2c2017;          /* aged wood / leather */
  --panel-2:   #3a2a1d;          /* lighter wood inset */
  --parchment: #e8d8b0;          /* scroll/parchment text on dark */
  --text:      #f4e8c8;          /* warm cream body text */
  --muted:     #b8a888;          /* faded ink */
  --accent:    #d9a441;          /* brass / gold */
  --accent-2:  #6fa86f;          /* fairy green */
  --ok:        #7ec47e;
  --bad:       #e06848;
  --border:    #5a4230;          /* dark wood trim */
  --border-2:  #8a6a44;          /* brass edge */
  /* The original Fairyland client uses Courier New for ALL text
     (CreateFontA ... FIXED_PITCH | FF_MODERN, "Courier New" — decomp
     main.cpp:1290,1393; game_view.cpp:2716,2934). Match it everywhere. */
  font-family: "Courier New", monospace;
}

/* ===== Registration page =====
   Keep the account page in the same warm wood/brass/pixel-art language as the
   game shell. It intentionally uses the live favicon as the small crest rather
   than introducing a separate generated logo asset. */
body.register-page {
  max-width: 900px;
  min-height: 100vh;
  padding: 2rem 1.5rem 3rem;
  overflow-x: hidden;
}
.register-shell {
  width: min(100%, 760px);
  margin: 0 auto;
}
.register-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 auto 1.2rem;
  text-align: left;
}
.register-banner h1 {
  margin: 0;
  font-size: 1.7rem;
  color: var(--parchment);
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #000a;
}
.register-banner p {
  margin: 0.2rem 0 0;
  color: var(--accent);
  font-size: 0.82rem;
  letter-spacing: 0.8px;
}
.register-crest {
  width: 54px;
  height: 54px;
  padding: 6px;
  background: var(--panel-2);
  border: 2px solid var(--border-2);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(255,238,168,0.18), 0 2px 0 #160d06;
}
.register-crest img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.register-panel {
  position: relative;
  width: min(100%, 610px);
  margin: 0 auto;
  padding: 1.45rem 2rem 1.7rem;
  background: var(--panel);
  border: 2px solid var(--border-2);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.38),
    inset 0 0 18px rgba(0,0,0,0.45),
    0 3px 0 #160d06,
    0 7px 16px rgba(0,0,0,0.5);
}
.register-panel::before,
.register-panel::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
  opacity: 0.7;
}
.register-panel::before { top: 10px; }
.register-panel::after { bottom: 10px; }
.register-panel-rivet {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c4933d;
  border: 1px solid #4d3217;
  box-shadow: inset 1px 1px 0 #f4d782, 0 1px 0 #120a04;
}
.register-panel-rivet-tl { top: 12px; left: 13px; }
.register-panel-rivet-tr { top: 12px; right: 13px; }
.register-panel-rivet-bl { bottom: 12px; left: 13px; }
.register-panel-rivet-br { bottom: 12px; right: 13px; }
.register-panel-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.register-panel-heading h2 {
  margin: 0;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  white-space: nowrap;
  text-shadow: 0 1px 0 #160d06;
}
.register-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2));
}
.register-rule:last-child { background: linear-gradient(90deg, var(--border-2), transparent); }
.register-intro {
  max-width: 520px;
  margin: 0 auto 1rem;
  color: var(--parchment);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}
.register-label {
  margin: 0.7rem 0 0.3rem;
  color: var(--parchment);
  font-size: 0.82rem;
}
body.register-page .register-input {
  display: block;
  width: 100%;
  min-height: 38px;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  background: #160f0a;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: 0.95rem/1.2 "Courier New", monospace;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
}
body.register-page .register-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.6), 0 0 0 2px rgba(217,164,65,0.25);
}
.register-help {
  margin: 0.2rem 0 0.35rem;
  color: var(--muted);
  font-size: 0.7rem;
}
.register-password-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
#register-website {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.register-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.8rem;
}
.register-actions button {
  min-width: 180px;
  margin: 0;
  border-radius: 4px;
  box-shadow: 0 2px 0 #1a1008, inset 0 1px 0 rgba(255,255,255,0.28);
}
.register-actions button:disabled {
  opacity: 0.45;
  filter: grayscale(0.5);
}
.register-back {
  color: var(--parchment);
  font-size: 0.8rem;
  text-decoration: none;
}
.register-back:hover { color: var(--accent); }
.register-message {
  margin: 1.1rem auto 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: #170f09;
  color: var(--parchment);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}
.register-message.success { color: var(--ok); border-color: var(--ok); }
.register-message.error { color: #f0a18c; border-color: var(--bad); }
.register-message.warning { color: #f0cf79; border-color: var(--accent); }
.register-message.busy { color: var(--parchment); }
.register-footer {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}
/* ===== Bug report page ===== */
body.bug-report-page {
  max-width: 1040px;
}
.bug-report-panel {
  width: min(100%, 860px);
}
.bug-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}
.bug-report-panel .register-label {
  display: block;
}
.bug-report-panel .bug-textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.4;
}
.bug-report-panel select.register-input {
  color: var(--text);
  cursor: pointer;
}
.bug-report-panel #bug-website {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.bug-return-link {
  display: block;
  margin-top: 0.8rem;
  text-align: center;
}
@media (max-width: 620px) {
  body.register-page { padding: 1rem 0.7rem 2rem; }
  .register-panel { padding: 1.35rem 1rem 1.5rem; }
  .register-password-row { grid-template-columns: 1fr; gap: 0.1rem; }
  .register-panel-heading { gap: 0.45rem; }
  .register-panel-heading h2 { font-size: 0.84rem; }
  .register-actions { flex-direction: column; }
  .register-actions button { width: 100%; }
  .bug-report-grid { grid-template-columns: 1fr; }
}
* { box-sizing: border-box; }
/* Global cursor canvas — overlays the entire stage at the highest z-index.
   Only the animated cursor sprite is drawn here; the rest is transparent. */
#cursor-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 800px; height: 600px;
  pointer-events: none;
  z-index: 9999;
  image-rendering: pixelated;
  display: none;   /* shown by JS once the stage is positioned */
}
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(111,168,111,0.18), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(217,164,65,0.10), transparent 55%),
    linear-gradient(160deg, var(--bg-grad-a) 0%, var(--bg-grad-b) 60%);
  color: var(--text);
  padding: 2rem 1.5rem 3rem;
  max-width: 900px;
  margin: 0 auto;
  min-height: 100vh;
}
/* Hide the OS cursor only inside the game window (login screen + game frame).
   Outside those, the normal OS cursor shows. The !important overrides the
   per-element cursor defaults (buttons=pointer, inputs=text) so the animated
   Fairyland cursor (drawn by JS) is all you see inside the game window.
   Also disable text selection / drag-selection inside the game window. */
#loading-screen, #loading-screen *,
#login-screen, #login-screen *,
#server-list-screen, #server-list-screen *,
#char-select-screen, #char-select-screen *,
#char-create-screen, #char-create-screen *,
#game-frame, #game-frame * {
  cursor: none !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
header h1 {
  margin: 0 0 0.4rem;
  font-size: 1.9rem;
  color: var(--parchment);
  text-shadow: 0 2px 0 #000a, 0 0 18px rgba(217,164,65,0.35);
  letter-spacing: 0.5px;
}
header h1 .sub {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
}
header { text-align: center; margin-bottom: 1.5rem; }

/* wood-and-brass panel */
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%),
    var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.25rem;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.35),
    inset 0 0 24px rgba(0,0,0,0.4),
    0 4px 0 #1a1008, 0 8px 20px rgba(0,0,0,0.5);
}
.card h2 {
  font-size: 1.05rem;
  margin: 0 0 0.8rem;
  color: var(--accent);
  font-variant: small-caps;
  letter-spacing: 1px;
  border-bottom: 1px dotted var(--border-2);
  padding-bottom: 0.35rem;
}
.card h2 .muted { font-size: 0.8rem; font-style: italic; }

label {
  display: block;
  margin: 0.6rem 0;
  font-size: 0.85rem;
  color: var(--muted);
}
input[type=text], input[type=password] {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  background: #160f0a;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
}
input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 1px 4px rgba(0,0,0,0.6), 0 0 0 2px rgba(217,164,65,0.3); }

button {
  margin-top: 0.85rem;
  padding: 0.6rem 1.3rem;
  background: linear-gradient(180deg, var(--accent) 0%, #b8842f 100%);
  color: #1a1008;
  border: 1px solid #6a4a1f;
  border-radius: 8px;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.05s, filter 0.1s;
}
button:hover:not(:disabled):not(.login-btn) { filter: brightness(1.08); }
button:active:not(:disabled):not(.login-btn) { transform: translateY(2px); }
button:disabled:not(.login-btn) { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.5); }
button.ghost {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--border-2);
  text-shadow: none;
  box-shadow: 0 2px 0 #1a1008;
}

.muted { color: var(--muted); }
a { color: var(--accent-2); }
a:hover { color: var(--accent); }
code {
  background: #160f0a;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--accent);
  border: 1px solid var(--border);
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  font-size: 0.8rem;
  font-family: "Courier New", monospace;
}
.badge.ok, .badge.live { color: var(--ok); border-color: var(--ok); }
.badge.bad { color: var(--bad); border-color: var(--bad); }

.stat-grid { display:grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; font-size:0.9rem; }
.stat-grid b { color: var(--accent); font-family: "Courier New", monospace; }
.game-log { font-family: "Courier New", monospace; font-size: 0.78rem; }

pre#log {
  background: #0d0805;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem;
  max-height: 260px;
  overflow: auto;
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
  color: #d8c8a0;
  white-space: pre-wrap;
  box-shadow: inset 0 1px 6px rgba(0,0,0,0.7);
}

/* ===== Game frame: 800x600, original Fairyland resolution ===== */
#game-frame {
  position: relative;
  width: 800px;
  height: 600px;
  max-width: 800px;   /* fixed — fitStage() transform handles mobile scaling */
  margin: 0 auto;
  background: #0a0e14;
  border: 3px solid var(--border-2);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,0.6);
  overflow: hidden;
  /* scale down on small screens while keeping aspect ratio */
  aspect-ratio: 4 / 3;
}
/* Game fade overlay (decomp drawGameFade: 400ms black fade on entry) */
#game-fade {
  position: absolute;
  inset: 0;
  background: #000;   /* game fade overlay MUST be pure black */
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* The native deadmove scene replaces the map and normal HUD for its short
   defeat animation. The canvas itself remains visible so fl_game.js can clear
   it to black and draw the centered deadmove.adf frame. */
#game-frame.deadmove-active > .ui-layer,
#game-frame.deadmove-active > #party-panel,
#game-frame.deadmove-active > #party-leader-menu,
#game-frame.deadmove-active > #party-target-hint,
#game-frame.deadmove-active > #cmd-hint,
#game-frame.deadmove-active > #hud-tooltip,
#game-frame.deadmove-active > #game-popup,
#game-frame.deadmove-active > #levelup-panel,
#game-frame.deadmove-active > #channel-menu,
#game-frame.deadmove-active > #hud-menu-art-canvas,
#game-frame.deadmove-active > #hud-menu-panel,
#game-frame.deadmove-active > #bank-menu-panel,
#game-frame.deadmove-active > #game-fg-canvas,
#game-frame.deadmove-active > #game-exit-confirm,
#game-frame.deadmove-active > #cursor-overlay {
  visibility: hidden !important;
}

/* The battle renderer owns the map surface. During a fight the ordinary top
   HUD and minimap are hidden; the bottom strip keeps only chat, its channel
   marker, and the channel-setting slot visible. Menus that cannot be used
   during a fight are hidden below. */
#game-frame.battle-mode > #ui-top-bar,
#game-frame.battle-mode > #ui-minimap,
#game-frame.battle-mode > #hud-menu-art-canvas,
#game-frame.battle-mode > #hud-menu-panel,
#game-frame.battle-mode > #bank-menu-panel,
#game-frame.battle-mode > #game-popup,
#game-frame.battle-mode > #game-exit-confirm,
#game-frame.battle-mode > #levelup-panel,
#game-frame.battle-mode > #channel-menu,
#game-frame.battle-mode > #dropdown-list,
#game-frame.battle-mode > #party-panel,
#game-frame.battle-mode > #party-leader-menu,
#game-frame.battle-mode > #party-target-hint,
#game-frame.battle-mode > #cmd-hint {
  visibility: hidden !important;
}

#game-frame.battle-mode #bar-slots .bar-slot:not([data-idx="0"]),
#game-frame.battle-mode #toolbar-player,
#game-frame.battle-mode #toolbar-pet,
#game-frame.battle-mode #friend-input,
#game-frame.battle-mode #friend-caret {
  visibility: hidden !important;
}

/* battle-hud-canvas is a full-frame layer (z-index 65). Keep the persistent
   chat strip above it, and keep the foreground HUD art above the strip so the
   channel marker and native chat scrollbar remain visible. The foreground
   canvas is transparent over the input text, so this does not obscure typing. */
#game-frame.battle-mode > #ui-bottom-bar {
  z-index: 66 !important;
  visibility: visible !important;
}
#game-frame.battle-mode > #ui-chat {
  z-index: 67 !important;
  visibility: visible !important;
}
#game-frame.battle-mode > #ui-chat #chat-log,
#game-frame.battle-mode > #chat-input,
#game-frame.battle-mode > #chat-caret,
#game-frame.battle-mode > #ui-bottom-bar #chat-emote-button {
  visibility: visible !important;
}
#game-frame.battle-mode > #game-fg-canvas { z-index: 68 !important; }

/* The canvas fills the frame entirely */
#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #0a0e14;
  cursor: none;            /* hide OS cursor; JS draws the sprite overlay */
  image-rendering: pixelated; /* crisp pixel-art upscaling */
  -ms-interpolation-mode: nearest-neighbor; /* IE/Edge Legacy */
}

#battle-hud-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 600px;
  z-index: 65;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ===== Loading screen (shown before login while assets preload) ===== */
#loading-screen {
  position: relative;
  width: 800px;
  height: 600px;
  max-width: 100%;
  margin: 0 auto;
  background: #1a1a1a;
  border: 3px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
#loading-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 800px; height: 600px;
  z-index: 0;
  image-rendering: pixelated;
}

/* ===== Login screen ===== */
#login-screen {
  position: relative;
  width: 800px;
  height: 600px;
  max-width: 100%;
  margin: 0 auto;
  background: #1a1a1a; /* loading_bg drawn on canvas */
  border: 3px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
/* UI canvas overlays — sit behind the DOM elements (which handle clicks/text) */
#login-ui-canvas, #server-list-ui-canvas, #char-select-ui-canvas, #char-create-ui-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 800px; height: 600px;
  z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
}
#game-ui-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 800px; height: 600px;
  pointer-events: none;
  image-rendering: pixelated;
}
#game-fg-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 800px; height: 600px;
  pointer-events: none;
  image-rendering: pixelated;
}
#login-cursor {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  display: none;
  image-rendering: pixelated;
  background: none; /* cursor_sheet drawn on canvas */
  z-index: 1000;
}
#server-list-cursor {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  display: none;
  image-rendering: pixelated;
  background: none; /* cursor_sheet drawn on canvas */
  z-index: 1000;
}
#char-select-cursor {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  display: none;
  image-rendering: pixelated;
  background: none; /* cursor_sheet drawn on canvas */
  z-index: 1000;
}
#char-create-cursor {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  display: none;
  image-rendering: pixelated;
  background: none; /* cursor_sheet drawn on canvas */
  z-index: 1000;
}

/* The real Fairyland login panel positioned on the loading bg.
   The panel bg art is drawn on the canvas at this box's top-left corner;
   input fields + Start/Exit buttons are positioned relative to this box.
   Adjust LEFT/TOP directly in px to move the panel. */
#login-panel {
  position: absolute;
  left: 232px;       /* adjust to move panel horizontally */
  top: 213px;        /* adjust to move panel vertically */
  width: 438px;
  height: 220px;
  z-index: 5;
}
#login-panel-bg {
  position: absolute;
  top: 0;           /* fine-tune: offset panel image down (+) or up (-) */
  left: 0;          /* fine-tune: offset panel image right (+) or left (-) */
  width: 451px;
  height: 189px;
  image-rendering: pixelated;
  pointer-events: none;
}
/* Input fields: completely invisible — no background, no border. */
#login-fields {
  position: absolute;
  left: 84px;
  top: 47px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 6;
}
#login-fields input {
  width: 100%;
  height: 24px;
  padding: 0;
  margin: 0;
  transform: translateY(-3px);
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #2a1a0a;
  font-size: 13px;
  font-family: "Courier New", monospace;
  line-height: 18px;
  caret-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#login-field-caret {
  position: absolute;
  display: none;
  transform: translateY(-2px);
  height: 24px;
  line-height: 24px;
  color: #2a1a0a;
  font-size: 13px;
  font-family: "Courier New", monospace;
  pointer-events: none;
  animation: login-caret-blink 1s steps(1) infinite;
}
@keyframes login-caret-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
/* Remove the password reveal eye icon (Edge/IE) and other browser widgets */
#login-fields input::-ms-reveal,
#login-fields input::-ms-clear {
  display: none !important;
}
/* Also kill any webkit/firefox password widgets */
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
}
/* Force-hide all pseudo-elements on password inputs (covers all browsers) */
#login-fields input[type="password"]::-webkit-inner-spin-button,
#login-fields input[type="password"]::-webkit-caps-lock-indicator,
#login-fields input[type="password"]::-webkit-strong-password-alert {
  display: none !important;
}
#login-fields input::placeholder {
  color: transparent;
}
#login-fields input::selection {
  background: transparent;
  color: #2a1a0a;
}
#login-fields input:focus {
  outline: none;
}

/* Start + Exit buttons: invisible click areas over the panel's button outlines.
   The hover sprite sits inside each button, hidden by default, and fades in
   on mouseover to reveal the highlighted button state. */
.login-btn {
  position: absolute;
  width: 70px;
  height: 42px;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  box-shadow: none;
  cursor: none;
  image-rendering: pixelated;
}
.login-btn .btn-hover-img {
  display: block;
  width: 70px;
  height: 42px;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 0.08s;
}
.login-btn:hover .btn-hover-img { opacity: 1; }
/* Use pointer-events on the hover img so hover works even when button is
   disabled (disabled buttons don't fire mouse events in some browsers). */
.login-btn .btn-hover-img { pointer-events: none; }
.login-btn:disabled { opacity: 1; }   /* don't dim; just prevent clicks */
.login-btn:disabled .btn-hover-img { opacity: 0; }
.login-btn:disabled:hover .btn-hover-img { opacity: 1; }
.login-btn-start {
  left: 273px;
  bottom: 160px;
}
.login-btn-exit {
  left: 273px;
  bottom: 69px;
}

/* Login error confirm dialog (shown when account/password doesn't match) */
#login-error {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 358px;
  height: 141px;
  z-index: 20;
}
#login-error > img:first-child {
  position: absolute;
  top: 0; left: 0;
  width: 358px;
  height: 141px;
  image-rendering: pixelated;
}
#login-error-msg {
  position: absolute;
  top: 35px;
  left: 25px;
  width: 220px;
  height: 85px;
  text-align: left;
  color: #2a1a0a;
  font-size: 13px;
  font-family: "Courier New", monospace;
  margin: 0;
}
#btn-error-ok {
  position: absolute;
  top: 28px;
  left: 276px;
  width: 28px;
  height: 32px;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 0;
  cursor: none;
  image-rendering: pixelated;
  overflow: visible;
}
#btn-error-ok img {
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 28px;
  height: 32px;
  image-rendering: pixelated;
  pointer-events: none;
}
#btn-error-ok .err-btn-normal { opacity: 1; }
#btn-error-ok .err-btn-hover { opacity: 0; }
#btn-error-ok:hover .err-btn-normal { opacity: 0; }
#btn-error-ok:hover .err-btn-hover { opacity: 1; }

/* ===== Server-list screen (after login, before char-select) =====
   Same 800x600 stage as the login screen. The 655x367 server-list background
   (nui_login_04) is centered horizontally and nudged down 18px — the exact
   placement the original client uses: x = (800-655)/2 = 72, y = (600-367)/2+18. */
#server-list-screen {
  position: relative;
  width: 800px;
  height: 600px;
  max-width: 100%;
  margin: 0 auto;
  background: #1a1a1a; /* loading_bg drawn on canvas */
  border: 3px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
#server-list-panel {
  position: absolute;
  left: 72px;            /* (800-655)/2 */
  top: 134px;            /* (600-367)/2 + 18 = 134 */
  width: 655px;
  height: 367px;
  /* Keep the live server-name/MOTD DOM text and hit areas above the
     server-list canvas. The canvas supplies the artwork underneath. */
  z-index: 20;
}
#server-list-bg {
  position: absolute;
  inset: 0;
  width: 655px;
  height: 367px;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

/* Server rows: 2 columns x 8 rows of 195x28 items, laid out at decomp-exact
   offsets. Left column x=44, right column x=239, top = 16 + row*45. Each row
   is a clickable cell with the nui_login_06 hover sprite behind the text. */
#server-list-rows {
  position: absolute;
  inset: 0;
}
.server-row {
  position: absolute;
  width: 189px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: #000;
  text-align: left;
}
.server-row:focus { outline: none; }
.server-row .srv-item-hover {
  position: absolute;
  top: -3px;
  left: 0;
  width: 193px;
  height: 29px;
  pointer-events: none;
  opacity: 0;
  image-rendering: pixelated;
}
.server-row:hover .srv-item-hover { opacity: 1; }
/* The golden border (hover sprite) shows ONLY on mouse-over — the selected
   state just changes the text, not the border. */
.server-row .srv-name {
  position: relative;
  z-index: 21;
  display: block;
  padding-left: 23px;        /* decomp text rect: item.left + 23 */
  padding-right: 10px;       /* item.right - 10 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000 !important;
}

/* Message/news area (server MOTD / status). Decomp: x+482..625, y+54..220. */
#server-list-message {
  position: absolute;
  left: 482px;
  top: 54px;
  width: 143px;              /* 625-482 */
  height: 166px;             /* 220-54 */
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #000;
  text-align: left;
  overflow: hidden;
  white-space: pre-wrap;
  pointer-events: none;
  z-index: 21;
}

/* Exit button (nui_login_07: 29x35 art). Keep the original client placement
   and native dimensions; stretching this small X to the surrounding recess
   makes it appear oversized on the server-list screen. */
#server-list-exit {
  position: absolute;
  left: 463px;
  top: 281px;
  width: 29px;
  height: 35px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}
#server-list-exit:focus { outline: none; }
#server-list-exit img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* scale uniformly — no aspect-ratio distortion */
  pointer-events: none;
}
#server-list-exit .srv-exit-hover { opacity: 0; }
#server-list-exit:hover .srv-exit-normal { opacity: 0; }
#server-list-exit:hover .srv-exit-hover { opacity: 1; }

/* ===== Char-select screen (after server pick, before game) =====
   The background is 800x600 (fills the whole stage). All offsets are relative
   to the panel origin = (0,0) since the bg IS the full 800x600 window.
   Matches the decomp drawCharSelectPanel coordinates exactly. */
#char-select-screen {
  position: relative;
  width: 800px;
  height: 600px;
  max-width: 100%;
  margin: 0 auto;
  background: #1a1a1a; /* matches login/server-list — avoids black flash on transition */
  border: 3px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
#char-select-panel {
  position: absolute;
  inset: 0;
  width: 800px;
  height: 600px;
}
#char-select-bg {
  position: absolute;
  inset: 0;
  width: 800px;
  height: 600px;
  pointer-events: none;
  user-select: none;
}

/* Character slots: 3 slots at (148+i*70, 104), each 39x46. Generated by JS. */
#char-slots {
  position: absolute;
  inset: 0;
}
.char-slot {
  position: absolute;
  width: 39px;
  height: 46px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}
.char-slot:focus { outline: none; }
.char-slot img {
  position: absolute;
  inset: 0;
  width: 39px;
  height: 46px;
  pointer-events: none;
}
#char-preview-canvas {
  position: absolute;
  left: 352px;    /* decomp: center x=400 in a 120px preview region */
  top: 276px;     /* decomp: ground y=436, bottom of the 160px region */
  width: 120px;
  height: 160px;
  pointer-events: none;
  z-index: 1;
  image-rendering: pixelated;
}

/* Left/right arrows (nui_char_01, 25x27).
   Decomp main.cpp:1318-1319: left (280,349), right (515,349). */
#char-left-arrow, #char-right-arrow {
  position: absolute;
  width: 25px;
  height: 27px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}
#char-left-arrow:focus, #char-right-arrow:focus { outline: none; }
#char-left-arrow { left: 280px; top: 349px; }
#char-right-arrow { left: 515px; top: 349px; }
#char-left-arrow img, #char-right-arrow img {
  position: absolute;
  inset: 0;
  width: 25px;
  height: 27px;
  pointer-events: none;
}
.ca-hover, .cd-hover, .cb-hover { opacity: 0; }
#char-left-arrow:hover .ca-idle, #char-right-arrow:hover .ca-idle { opacity: 0; }
#char-left-arrow:hover .ca-hover, #char-right-arrow:hover .ca-hover { opacity: 1; }

/* Delete button (nui_char_03, 112x24). Decomp: (70,507). Non-functional. */
#char-delete-btn {
  position: absolute;
  left: 70px;
  top: 507px;
  width: 112px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}
#char-delete-btn:focus { outline: none; }
#char-delete-btn img {
  position: absolute;
  inset: 0;
  width: 112px;
  height: 24px;
  pointer-events: none;
}
#char-delete-btn:hover .cd-idle { opacity: 0; }
#char-delete-btn:hover .cd-hover { opacity: 1; }

/* Start + Exit buttons (nui_char_02, 69x22). Start (634,487), Exit (634,527). */
#char-start-btn, #char-exit-btn {
  position: absolute;
  width: 69px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}
#char-start-btn:focus, #char-exit-btn:focus { outline: none; }
#char-start-btn { left: 634px; top: 487px; }
#char-exit-btn { left: 634px; top: 527px; }
#char-start-btn img, #char-exit-btn img {
  position: absolute;
  inset: 0;
  width: 69px;
  height: 22px;
  pointer-events: none;
}
#char-start-btn:hover .cb-idle, #char-exit-btn:hover .cb-idle { opacity: 0; }
#char-start-btn:hover .cb-hover, #char-exit-btn:hover .cb-hover { opacity: 1; }

/* Name / level / exp text for the selected character.
   Decomp: name (370,476), level (370,507), exp (370,537). Courier New 15px,
   color rgb(0,0,96). */
#char-info {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#char-name-text, #char-level-text, #char-exp-text {
  position: absolute;
  width: 166px;
  font-family: "Courier New", monospace;
  font-size: 15px;
  color: rgb(0, 0, 96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#char-name-text  { left: 370px; top: 476px; line-height: 22px; }
#char-level-text { left: 370px; top: 507px; line-height: 22px; }
#char-exp-text   { left: 370px; top: 537px; line-height: 21px; }

/* Status text (shown when no characters exist). Decomp: (150,130). */
#char-status {
  position: absolute;
  left: 150px;
  top: 130px;
  width: 200px;
  font-family: "Courier New", monospace;
  font-size: 15px;
  color: rgb(0, 0, 96);
  text-align: center;
  pointer-events: none;
  display: none;
}

/* Delete-confirmation dialog (overlays char-select). Mirrors #login-error. */
#char-delete-confirm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 358px;
  height: 141px;
  z-index: 100;
  isolation: isolate;
}
#char-delete-confirm-bg {
  position: absolute;
  top: 0; left: 0;
  width: 358px;
  height: 141px;
  z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
}
#char-delete-msg {
  position: absolute;
  top: 35px;
  left: 25px;
  width: 220px;
  height: 85px;
  text-align: left;
  color: #2a1a0a;
  font-size: 13px;
  font-family: "Courier New", monospace;
  margin: 0;
  z-index: 1;
}
#char-delete-ok, #char-delete-cancel {
  position: absolute;
  width: 28px;
  height: 32px;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 0;
  cursor: none;
  image-rendering: pixelated;
  overflow: visible;
  z-index: 1;
}
#char-delete-ok     { top: 28px;  left: 276px; }
#char-delete-cancel { top: 84px;  left: 276px; }
#char-delete-ok img, #char-delete-cancel img {
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 28px;
  height: 32px;
  image-rendering: pixelated;
  pointer-events: none;
}
#char-delete-ok .err-btn-normal, #char-delete-cancel .err-btn-normal { opacity: 1; }
#char-delete-ok .err-btn-hover, #char-delete-cancel .err-btn-hover { opacity: 0; }
#char-delete-ok:hover .err-btn-normal, #char-delete-cancel:hover .err-btn-normal { opacity: 0; }
#char-delete-ok:hover .err-btn-hover, #char-delete-cancel:hover .err-btn-hover { opacity: 1; }

/* ===== Character create screen (mirrors #char-select-screen layout) ===== */
/* All coordinates are decomp panel-relative pixels (main.cpp:1357-1451). */
#char-create-screen {
  position: relative;
  width: 800px;
  height: 600px;
  max-width: 100%;
  margin: 0 auto;
  background: #1a1a1a; /* matches other screens — avoids black flash on transition */
  border: 3px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
#char-create-panel {
  position: absolute;
  inset: 0;
  width: 800px;
  height: 600px;
}
#char-create-bg {
  position: absolute;
  inset: 0;
  width: 800px;
  height: 600px;
  pointer-events: none;
  user-select: none;
}

/* Live model preview (decomp: centered at x+400, baseline y+436). */
#char-create-preview {
  position: absolute;
  left: 340px;
  top: 276px;
  width: 120px;
  height: 160px;
  pointer-events: none;
  z-index: 1;
  image-rendering: pixelated;
}

/* Name + Nickname text fields (decomp nameRect/nicknameRect).
   Courier New 15px, color rgb(20,30,96). */
#cc-name, #cc-nick {
  position: absolute;
  width: 185px;
  height: 22px;
  padding: 0 4px;
  margin: 0;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  font-family: "Courier New", monospace;
  font-size: 15px;
  color: rgb(20, 30, 96);
  caret-color: rgb(20, 30, 96);
  z-index: 2;
}
#cc-name:focus, #cc-nick:focus {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
#cc-name  { left: 365px; top: 481px; }
#cc-nick  { left: 365px; top: 530px; }

/* Race/Sex/Type choice groups. These transparent hit areas follow the
   native-size control sprites drawn by renderCharCreateUi. */
.cc-choice {
  position: absolute;
  height: 27px;
}
#cc-race-group { left: 623px; top: 178px; width: 136px; height: 29px; }
#cc-sex-group  { left: 616px; top: 216px; width: 149px; }
#cc-type-group { left: 627px; top: 254px; width: 125px; }

.cc-arrow, .cc-half {
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
  cursor: pointer;
}
/* Race arrows (nui_char_06, 18x20). The hit rectangles are 18x27,
   while the sprites sit two pixels below the race label. */
.cc-arrow { width: 18px; height: 27px; }
.cc-arrow.cc-left { left: 0; }
.cc-arrow.cc-right { left: 118px; }
.cc-arrow:focus { outline: none; }
.cc-arrow-img {
  position: absolute;
  top: 2px; left: 0;
  width: 18px;
  height: 20px;
  pointer-events: none;
  image-rendering: pixelated;
}

/* Sex/Type paired halves, aligned to the native labels.
   Sex: left nui_char_07 0/1 = 55x22, right nui_char_07 2/3 = 78x22.
   Type: nui_char_08 both = 42x22. */
.cc-half { height: 27px; }
#cc-sex-group .cc-half.cc-left  { left: 0;  width: 55px; }
#cc-sex-group .cc-half.cc-right { left: 71px; width: 78px; }
#cc-type-group .cc-half.cc-left  { left: 0;  width: 42px; }
#cc-type-group .cc-half.cc-right { left: 83px; width: 42px; }
.cc-half:focus { outline: none; }

/* Selector dot (nui_char_10, 11x10) between the paired icons. */
.cc-selector {
  position: absolute;
  left: 58px;
  top: 5px;
  width: 11px;
  height: 10px;
  pointer-events: none;
}

/* Paired-choice icon images (sit behind the transparent .cc-half buttons,
   which provide the hit zones). */
.cc-half-icon {
  position: absolute;
  top: 0;
  pointer-events: none;
}
.cc-left-icon { left: 0; }
.cc-right-icon { left: 71px; }

/* Choice label image (race current value). */
.cc-choice-label {
  position: absolute;
  left: 29px;
  top: 0;
  pointer-events: none;
}

/* Stat readout (STR/DEX/INT/CHA/CON/LUK). decomp statRect x+164..188,
   y+219+i*38. Courier New 15px, centered, color rgb(20,30,96). */
#cc-stats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cc-stat-line {
  position: absolute;
  left: 164px;
  width: 24px;
  font-family: "Courier New", monospace;
  font-size: 15px;
  color: rgb(20, 30, 96);
  text-align: center;
  line-height: 24px;
}

/* Color target tabs (nui_char_09, 67x20). */
#cc-color-tabs {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* container covers the panel; only the tabs receive clicks */
}
.cc-tab {
  position: absolute;
  top: 293px;
  width: 67px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;   /* re-enable on tabs (parent has pointer-events: none) */
}
.cc-tab:focus { outline: none; }
.cc-tab[data-target="2"] { left: 549px; }   /* Suit */
.cc-tab[data-target="0"] { left: 623px; }   /* Hair */
.cc-tab[data-target="1"] { left: 697px; }   /* Skin */
.cc-tab img {
  position: absolute;
  inset: 0;
  width: 67px;
  height: 20px;   /* nui_char_09 is 67x20; avoid 2px stretch */
  pointer-events: none;
}

/* RGB sliders: the centered track runs from x+638 through x+712, with
   native caps at x+621 and x+722. The range input is transparent and only
   supplies pointer interaction; the canvas paints the ADF caps and handle. */
.cc-slider-row {
  position: absolute;
  left: 621px;
  width: 119px;
  height: 20px;
}
#cc-slider-r { top: 331px; }
#cc-slider-g { top: 369px; }
#cc-slider-b { top: 407px; }
.cc-slider-row input[type="range"] {
  position: absolute;
  left: 17px;
  top: 0;
  width: 75px;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  opacity: 0; /* the native caps/handle are painted on the UI canvas */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.cc-slider-row input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(0,0,0,0.25);
  height: 6px;
  border-radius: 3px;
}
.cc-slider-row input[type="range"]::-moz-range-track {
  background: rgba(0,0,0,0.25);
  height: 6px;
  border-radius: 3px;
}
.cc-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 14px;
  background: rgb(220, 200, 140);
  border: 1px solid rgb(120, 90, 40);
  border-radius: 2px;
  margin-top: -4px;
}
.cc-slider-row input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 14px;
  background: rgb(220, 200, 140);
  border: 1px solid rgb(120, 90, 40);
  border-radius: 2px;
}

/* Skin palette (only visible when colorTarget==1). decomp main.cpp:1429-1440:
   bg nui_char_11 (36x216) at x+759,y+292; 12 swatches (nui_char_12, 17x17)
   at paletteX+9 = x+768, spaced 18px vertically. */
#cc-skin-palette {
  position: absolute;
  left: 759px;
  top: 292px;
  width: 36px;
  height: 216px;
  box-sizing: border-box;
  padding-top: 1px; /* native first swatch starts at paletteY + 1 */
  display: none;
}
.cc-swatch {
  display: block;
  width: 17px;
  height: 17px;
  margin: 0 0 1px 9px;   /* +9px inset to match paletteX+9; 1px gap = 18px stride */
  padding: 0;
  border: 0;
  background: transparent !important;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.cc-swatch:focus { outline: none; }
.cc-swatch img {
  width: 17px;
  height: 17px;
  pointer-events: none;
}

/* Start + Exit buttons (nui_char_02, 69x22). decomp Start (632,487), Exit (632,527). */
#cc-start-btn, #cc-exit-btn {
  position: absolute;
  width: 69px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}
#cc-start-btn:focus, #cc-exit-btn:focus { outline: none; }
#cc-start-btn { left: 632px; top: 487px; }
#cc-exit-btn  { left: 632px; top: 527px; }
#cc-start-btn img, #cc-exit-btn img {
  position: absolute;
  inset: 0;
  width: 69px;
  height: 22px;
  pointer-events: none;
}
#cc-start-btn:hover .cb-idle, #cc-exit-btn:hover .cb-idle { opacity: 0; }
#cc-start-btn:hover .cb-hover, #cc-exit-btn:hover .cb-hover { opacity: 1; }

/* ===== Toggleable overlay panels (Log / Session) ===== */
.overlay-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  max-width: 90vw;
  max-height: 70vh;
  z-index: 200;
  background: var(--panel);
  border: 2px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
}
.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border);
  font-variant: small-caps;
  color: var(--accent);
  font-weight: bold;
}
.overlay-close {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.overlay-close:hover { color: var(--bad); }
.overlay-panel .game-log {
  margin: 0;
  border: none;
  border-radius: 0;
  flex: 1;
  max-height: 60vh;
}
.overlay-panel .stat-grid {
  padding: 0.8rem;
}

/* Base class for absolutely-positioned UI overlay layers.
   pointer-events:none so clicks pass through to the canvas; interactive
   children (buttons, inputs) re-enable pointer-events. */
.ui-layer {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}
.ui-layer img {
  display: block;
  border: none;          /* kill UA default border on src-less <img> elements */
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: pixelated;
}
/* Background canvases for the top/bottom bars — drawn behind all text/inputs
   so the bar art shows but the DOM text (time, chat, caret) stays visible. */
#topbar-bg-canvas, #bottombar-bg-canvas {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
}
#topbar-bg-canvas { width: 800px; height: 46px; }
#bottombar-bg-canvas { width: 800px; height: 70px; }
.ui-layer button,
.ui-layer input[type="range"] {
  pointer-events: auto;
}
.ui-layer button {
  border: none;        /* kill UA default button border */
  background: transparent;
}

/* ---- Top bar: status strip (nui001b, 800x46) ---- */
#ui-top-bar {
  top: 0; left: 0;
  width: 100%;
  height: 46px;
}
#top-bar-bg {
  width: 100%;
  height: 46px;
}
/* HP/MP/SAT stat bars — native bar_hp/bar_mp/bar_sat assets are 92x6. */
#top-stats {
  position: absolute;
  left: 18px;
  top: 8px;
  width: 92px;
  height: 36px;
  pointer-events: auto;
}
.stat-row {
  height: 12px;
  margin-bottom: 0;
  pointer-events: auto;
  cursor: help;
}
.stat-fill {
  width: 92px;
  height: 6px;
  overflow: hidden;
  position: relative;
}
.stat-fill-img {
  width: 92px;
  height: 6px;
  background: none;   /* bar fills drawn on canvas — no DOM background */
}
/* Time text (above EXP bar) */
#top-info {
  position: absolute;
  left: 232px;
  top: 10px;
  width: 300px;
  height: 14px;
  overflow: hidden;
  text-align: center;
  color: #3b2211;
  font: 13px/14px "Courier New", monospace;
}
/* Level up indicator (decomp topBarOrigin.x+129, clickable → opens levelup panel) */
#levelup-indicator {
  position: absolute;
  left: 128px;
  top: 4px;
  width: 45px;
  height: 39px;
  pointer-events: auto;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  appearance: none;
  display: none;
  image-rendering: pixelated;
  z-index: 3;
}
/* Weather/day-night indicator (49x37) */
#weather-icon {
  position: absolute;
  left: 190px;
  top: 4px;
  width: 49px;
  height: 37px;
  pointer-events: none;
}
/* 7 menu icons — decomp: topBarOrigin.x+547+i*36, y+10.
   The shared origin and final dropdown offset align the DOM hit boxes with
   the extracted top-bar artwork. */
#top-menu {
  position: absolute;
  left: 548px;
  top: 10px;
  width: 250px;
  height: 32px;
  pointer-events: auto;
  z-index: 3;
}
#top-menu .menu-icon {
  position: absolute;
  cursor: pointer;
  pointer-events: auto !important;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  appearance: none;
  image-rendering: pixelated;
  /* The actual sprite is drawn on canvas; this box just needs a non-zero
     size so rectOf() can read its position. 32x32 matches most icon art;
     the canvas draws each sprite at native size within this box. */
  top: 0;
  width: 32px;
  height: 32px;
}
#top-menu .menu-icon:focus,
#top-menu .menu-icon:focus-visible,
#levelup-indicator:focus,
#levelup-indicator:focus-visible {
  outline: none;
}
#top-menu .menu-icon.party-disabled { opacity: 0.58; }
#top-menu .menu-icon[data-idx="1"].party-disabled { left: 36px; }
#top-menu .menu-icon[data-idx="0"] { left: 0; }
#top-menu .menu-icon[data-idx="1"] { left: 37px; }
#top-menu .menu-icon[data-idx="2"] { left: 72px; }
#top-menu .menu-icon[data-idx="3"] { left: 108px; }
#top-menu .menu-icon[data-idx="4"] { left: 144px; }
#top-menu .menu-icon[data-idx="5"] { left: 180px; }
#top-menu .menu-icon[data-idx="6"] { left: 215px; }

/* Dropdown list (Ctrl+I) — decomp: topBar+756, y+51+i*43, 44x43 each */
#dropdown-list {
  position: absolute;
  left: 749px;
  top: 51px;
  z-index: 10;
}
.dd-entry {
  position: absolute;
  width: 44px;
  height: 43px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: transform 0.15s ease-out;
  pointer-events: auto;
  border: none;
  outline: none;
  background: transparent;
  appearance: none;
}
.dd-entry .dd-bg,
.dd-entry .dd-icon {
  position: absolute;
  display: block;
  pointer-events: none;
  border: none;
}
/* Background frame: native size 44x43 */
.dd-entry .dd-bg {
  top: 0; left: 0;
  width: 44px;
  height: 43px;
  image-rendering: pixelated;
}
/* Entry icon: native size 32x30, positioned at +6,+6 (decomp game_view.cpp:1808) */
.dd-entry .dd-icon {
  top: 6px; left: 6px;
  width: 32px;
  height: 30px;
  image-rendering: auto;
}
.dd-entry:focus,
.dd-entry:focus-visible { outline: none; }
.dd-entry:hover {
  transform: translateX(-6px);
  filter: brightness(1.3);
}

/* Player/Pet toolbar toggle — decomp: bottomBar+754/+776, y+8 */
#toolbar-player, #toolbar-pet {
  position: absolute;
  top: 4px;
  width: 20px;
  height: 18px;
  padding: 0; margin: 0; border: 0; outline: none;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  z-index: 3;
}
#toolbar-player { left: 733px; top: 0px; }
#toolbar-pet { left: 757px; top: 0px; }
#chat-emote-button {
  position: absolute;
  left: 32px;
  top: 8px;
  /* nui001a_03.adf frames are native 16x16; do not stretch them to the
     20x18 dimensions used by the player/pet toolbar controls. */
  width: 16px;
  height: 16px;
  padding: 0;
  pointer-events: none;
  z-index: 3;
}

/* Hover tooltip (decomp drawGameViewTooltip: cream bg, black border, 14px) */
#hud-tooltip {
  position: absolute;
  padding: 1px 4px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: rgb(0, 0, 0);
  background: rgb(250, 238, 204);
  border: 1px solid rgb(0, 0, 0);
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
}

/* NPC interaction popup (decomp drawGamePopup: 302x168 from nsys021) */
#game-popup {
  position: absolute;
  /* The native origin centers the complete 302x261 dialogue + choice area,
     not only the 302x168 parchment panel. */
  left: 249px; top: 115px;
  width: 302px; height: 168px;
  transform: scale(0.94);
  transform-origin: 50% 0;
  /* Always above HUD pages, including the inventory that can trigger an
     item-use popup before the server response arrives. */
  z-index: 90;
}
#popup-bg { position: absolute; top: 0; left: 0; width: 302px; height: 168px; image-rendering: pixelated; pointer-events: none; }
#popup-title { position: absolute; left: 24px; top: 6px; width: 246px; height: 18px; font-family: "Courier New", monospace; font-size: 14px; color: rgb(63,32,12); }
#popup-body-viewport { position: absolute; left: 24px; top: 30px; width: 246px; height: 120px; overflow: hidden; pointer-events: auto; }
#popup-body { position: absolute; left: 0; top: 0; width: 246px; min-height: 120px; font-family: "Courier New", monospace; font-size: 14px; line-height: normal; color: rgb(63,32,12); white-space: pre-wrap; word-wrap: break-word; overflow: visible; }
#game-popup.popup-no-title #popup-body-viewport { top: 34px; height: 116px; }
#popup-scroll-up, #popup-scroll-thumb, #popup-scroll-down {
  position: absolute;
  left: 274px;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  filter: none;
  transform: none;
  transition: none;
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;
}
#popup-scroll-up { top: 32px; left: 270px; }
#popup-scroll-thumb { top: 47px; left: 270px; pointer-events: none; }
#popup-scroll-down { top: 133px; left: 270px; }
#popup-choices { position: absolute; top: 173px; left: 0; width: 302px; }
.popup-choice { display: block; width: 302px; height: 28px; margin: 0 0 2px; padding: 0; border: 0; outline: none; background: transparent; cursor: pointer; position: relative; font-family: "Courier New", monospace; font-size: 14px; font-weight: normal; color: rgb(63,32,12); text-shadow: none; box-shadow: none; transition: none; -webkit-appearance: none; appearance: none; z-index: 2; }
.popup-choice img { position: absolute; top: 0; left: 0; width: 302px; height: 28px; image-rendering: pixelated; pointer-events: none; }
.popup-choice span { position: absolute; left: 8px; right: 8px; top: 0; max-width: calc(100% - 16px); line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.popup-choice:hover {
  background: rgba(255, 232, 140, 0.12);
  /* The original client marks the active parchment row with a thin green
     inner frame. Keep the native orange row artwork underneath it. */
  box-shadow: inset 0 0 0 1px rgba(0, 113, 0, 0.95), inset 0 0 0 2px rgba(0, 203, 0, 0.42);
  filter: none;
  transform: none;
}
.popup-choice:active { filter: none; transform: none; }
#popup-scroll-up:hover, #popup-scroll-down:hover { filter: none; transform: none; }
#popup-close { position: absolute; right: 13px; top: 5px; width: 16px; height: 16px; padding: 0; margin: 0; border: 0; outline: none; background: transparent; cursor: pointer; }

/* Escape/quit dialog (decomp nsys021 frame 0 background + nsys022 choice rows) */
#game-exit-confirm {
  position: absolute;
  left: 249px; top: 115px;
  width: 302px; height: 168px;
  transform: scale(0.94);
  transform-origin: 50% 0;
  z-index: 90;
}
#exit-title { position: absolute; left: 24px; top: 30px; width: 246px; height: 120px; font-family: "Courier New", monospace; font-size: 14px; line-height: normal; color: rgb(63,32,12); white-space: pre-wrap; }
#exit-choices { position: absolute; top: 173px; left: 0; width: 302px; }
.exit-choice { display: block; width: 302px; height: 28px; margin: 0 0 2px; padding: 0; border: 0; outline: none; background: transparent; cursor: pointer; position: relative; font-family: "Courier New", monospace; font-size: 14px; font-weight: normal; color: rgb(63,32,12); text-shadow: none; box-shadow: none; transition: none; -webkit-appearance: none; appearance: none; }
.exit-choice span { position: absolute; left: 8px; right: 8px; top: 0; max-width: calc(100% - 16px); line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
#exit-close-btn { position: absolute; right: 13px; top: 5px; width: 16px; height: 16px; padding: 0; margin: 0; border: 0; outline: none; background: transparent; cursor: pointer; }

/* Level-up stat panel (native nsys010 at 175x312).  The original opens on
   the left edge of the HUD, above the chat mask and world effects. */
#levelup-panel { position: absolute; left: 30px; top: 51px; width: 175px; height: 312px; z-index: 70; }
#levelup-art-canvas { position: absolute; inset: 0; width: 175px; height: 312px; z-index: 1; pointer-events: none; image-rendering: pixelated; }
#levelup-bg { position: absolute; top: 0; left: 0; width: 175px; height: 312px; image-rendering: pixelated; pointer-events: none; }
#levelup-title { position: absolute; left: 14px; top: 10px; width: 131px; height: 18px; z-index: 2; text-align: center; font-family: "Courier New", monospace; font-size: 14px; color: rgb(96,50,18); }
#levelup-stats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.levelup-stat { position: absolute; left: 42px; width: 102px; height: 22px; font-family: "Courier New", monospace; font-size: 14px; color: rgb(96,50,18); line-height: 22px; }
#levelup-actions { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.levelup-stat-icon,
.levelup-stat-add {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  image-rendering: pixelated;
  -webkit-appearance: none;
  appearance: none;
}
.levelup-stat-icon { left: 16px; width: 20px; height: 20px; pointer-events: none; }
.levelup-stat-add { left: 141px; width: 17px; height: 15px; }
#levelup-points-label { position: absolute; left: 12px; top: 266px; z-index: 2; width: 151px; font-family: "Courier New", monospace; font-size: 14px; color: rgb(96,50,18); }
#levelup-points { position: absolute; left: 145px; top: 286px; z-index: 2; width: 16px; text-align: right; font-family: "Courier New", monospace; font-size: 14px; color: rgb(96,50,18); }
#levelup-close { position: absolute; left: 148px; top: 8px; z-index: 4; width: 22px; height: 22px; padding: 0; margin: 0; border: 0; outline: none; background: transparent; cursor: pointer; }

/* Chat channel menu (decomp drawChatChannelMenu: 175x312). The original
   constructor places this panel at (3,75) in the 800x600 game surface. */
#channel-menu { position: absolute; left: 3px; top: 75px; width: 175px; height: 312px; z-index: 50; }
#channel-bg { position: absolute; top: 0; left: 0; width: 175px; height: 312px; image-rendering: pixelated; pointer-events: none; }
#channel-title { position: absolute; left: 11px; top: 6px; width: 135px; height: 24px; text-align: center; font-family: "Courier New", monospace; font-size: 14px; line-height: 24px; color: rgb(91,47,18); }
#channel-list, #channel-filters { position: absolute; inset: 0; pointer-events: none; }
.channel-label { position: absolute; left: 11px; width: 121px; height: 27px; cursor: pointer; pointer-events: auto; }
.channel-label img { width: 121px; height: 27px; image-rendering: pixelated; pointer-events: none; }
.channel-light { position: absolute; width: 22px; height: 22px; cursor: pointer; pointer-events: auto; }
.channel-light img { width: 22px; height: 22px; image-rendering: pixelated; pointer-events: none; }
#channel-fonts { position: absolute; top: 255px; left: 11px; pointer-events: none; }
.channel-font { position: absolute; width: 30px; height: 24px; cursor: pointer; pointer-events: auto; }
.channel-font img { width: 30px; height: 24px; image-rendering: pixelated; pointer-events: none; }
#channel-page { position: absolute; left: 13px; top: 284px; width: 108px; height: 20px; pointer-events: none; }
#channel-page button { position: absolute; top: 0; width: 16px; height: 20px; padding: 0; margin: 0; border: 0; outline: none; background: transparent; cursor: pointer; pointer-events: auto; }
#channel-page-prev { left: 0; }
#channel-page-next { right: 0; }
#channel-page-prev::before, #channel-page-next::before { display: block; width: 100%; height: 100%; color: #1f8b2d; font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; line-height: 18px; text-shadow: 1px 0 #0d5d1d; }
#channel-page-prev::before { content: "◀"; }
#channel-page-next::before { content: "▶"; }
#channel-page button:hover::before { color: #42ad43; }
#channel-page-label { position: absolute; left: 29px; top: 0; width: 50px; height: 20px; color: rgb(63,32,12); font-family: "Courier New", monospace; font-size: 14px; line-height: 20px; text-align: center; pointer-events: none; }
#channel-close { position: absolute; left: 148px; top: 6px; width: 20px; height: 20px; padding: 0; margin: 0; border: 0; outline: none; background: transparent; cursor: pointer; }

/* Shared HUD menus. Fixed-size native panels use the extracted nsys sprites
   above; these pages intentionally use the same cream/gold/blue palette while
   allowing inventory grids and stat lists to grow without clipping. */
#hud-menu-panel {
  position: absolute;
  left: 246px;
  top: 72px;
  width: 308px;
  max-height: 430px;
  box-sizing: border-box;
  display: none;
  z-index: 70;
  pointer-events: auto;
  overflow: hidden;
  color: #4b2b16;
  font: 13px/1.25 "Courier New", monospace;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22) 25%, transparent 25%) 0 0 / 6px 6px,
    linear-gradient(315deg, rgba(255,255,255,0.14) 25%, transparent 25%) 0 0 / 6px 6px,
    rgba(197, 208, 208, 0.82);
  border: 3px solid #e2aa4c;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #f6d27b, inset 0 0 0 4px #96602d, 3px 4px 0 rgba(0,0,0,0.48);
}
#hud-menu-header {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin: 0 -1px;
  padding: 0 8px 0 16px;
  color: #6b3914;
  background: linear-gradient(#f2c56b, #d58b32);
  border-bottom: 2px solid #a96525;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
  text-shadow: 1px 1px rgba(255,235,161,0.55);
}
#hud-menu-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud-menu-close {
  width: 21px; height: 21px; padding: 0; margin: 0;
  color: #9a3b14; background: transparent; border: 0;
  font: bold 22px/17px Arial, sans-serif; cursor: pointer;
}
#hud-menu-close:hover { color: #5d1e0d; }
#hud-menu-subtitle {
  min-height: 18px;
  box-sizing: border-box;
  padding: 6px 14px 2px;
  color: #667576;
  font-size: 11px;
}
#hud-menu-content {
  max-height: 360px;
  overflow-y: auto;
  padding: 6px 12px 12px;
  scrollbar-color: #a27b43 #aeb8b7;
}

/* Native Bank window (nsys014.adf, 254x438). The artwork is painted by
   ui_render.js; these controls are transparent hit targets only, keeping the
   original question-mark slots, footer, and parchment texture intact. */
#bank-menu-panel {
  position: absolute;
  left: 15px;
  top: 5px;
  width: 254px;
  height: 438px;
  box-sizing: border-box;
  display: none;
  z-index: 71;
  pointer-events: auto;
  overflow: visible;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
  background: transparent;
  border: 0;
  outline: none;
}
#bank-menu-title {
  position: absolute;
  z-index: 3;
  left: 42px;
  top: 5px;
  width: 170px;
  height: 20px;
  overflow: hidden;
  color: #5b2f12;
  text-align: center;
  white-space: nowrap;
  text-overflow: clip;
  font: 14px/18px "Courier New", monospace;
  text-shadow: 1px 1px rgba(255,235,161,0.55);
  pointer-events: none;
}
#bank-menu-close {
  position: absolute;
  z-index: 5;
  right: 4px;
  top: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
#bank-menu-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 254px;
  height: 438px;
  pointer-events: none;
}
#bank-menu-panel .bank-item-slot,
#bank-menu-panel .bank-page-prev,
#bank-menu-panel .bank-page-next,
#bank-menu-panel .bank-action {
  position: absolute;
  box-sizing: border-box;
  z-index: 5;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-shadow: none;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
#bank-menu-panel .bank-item-slot::-moz-focus-inner,
#bank-menu-panel .bank-page-prev::-moz-focus-inner,
#bank-menu-panel .bank-page-next::-moz-focus-inner,
#bank-menu-panel .bank-action::-moz-focus-inner {
  padding: 0;
  border: 0;
}
#bank-menu-panel .bank-item-slot:focus,
#bank-menu-panel .bank-page-prev:focus,
#bank-menu-panel .bank-page-next:focus,
#bank-menu-panel .bank-action:focus {
  outline: none;
}
#bank-menu-panel .bank-item-slot:disabled,
#bank-menu-panel .bank-page-prev:disabled,
#bank-menu-panel .bank-page-next:disabled {
  cursor: default;
}
#bank-cash {
  position: absolute;
  left: 19px;
  top: 387px;
  width: 118px;
  height: 18px;
  overflow: hidden;
  color: #3f200c;
  white-space: nowrap;
  pointer-events: none;
}
#bank-page-label {
  position: absolute;
  left: 188px;
  top: 397px;
  width: 31px;
  height: 18px;
  color: #3f200c;
  text-align: center;
  white-space: nowrap;
  font: 14px/18px "Courier New", monospace;
  pointer-events: none;
}
#bank-page-prev,
#bank-page-next {
  top: 397px;
  width: 17px;
  height: 20px;
}
#bank-page-prev { left: 166px; }
#bank-page-next { left: 216px; }
#bank-action-character,
#bank-action-account {
  top: 399px;
  width: 32px;
  height: 32px;
}
#bank-action-character { left: 19px; }
#bank-action-account { left: 61px; }

/* Native Trade window (two nsys025 panels). Each source panel is 288x384;
   the original client places the local and remote sides edge-to-edge at
   x=37/325 and y=27. The canvas paints the panel and icon artwork while the
   transparent DOM controls provide the live names and hit targets. */
#hud-menu-panel.trade-menu {
  left: 37px;
  top: 27px;
  width: 576px;
  height: 384px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
}
#hud-menu-panel.trade-menu #hud-menu-header {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 576px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: block;
  color: transparent;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
#hud-menu-panel.trade-menu #hud-menu-title,
#hud-menu-panel.trade-menu #hud-menu-subtitle { display: none; }
#hud-menu-panel.trade-menu #hud-menu-close {
  position: absolute;
  z-index: 7;
  right: 11px;
  top: 4px;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.trade-menu #hud-menu-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 576px;
  height: 384px;
  max-height: none;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  scrollbar-width: none;
}
.trade-side {
  position: absolute;
  top: 0;
  width: 288px;
  height: 384px;
  pointer-events: none;
}
.trade-side-local { left: 0; }
.trade-side-remote { left: 288px; }
.trade-side-title {
  position: absolute;
  left: 0;
  top: 4px;
  width: 288px;
  height: 20px;
  overflow: hidden;
  color: #5b2f12;
  font: 14px/20px "Courier New", monospace;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 1px 1px rgba(255,235,161,0.55);
  pointer-events: none;
}
.trade-top-action,
.trade-slot,
.trade-page-arrow,
.trade-footer-action {
  position: absolute;
  box-sizing: border-box;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
}
.trade-top-action { width: 56px; height: 36px; z-index: 5; }
.trade-top-action:disabled { cursor: default; }
.trade-slot { width: 44px; height: 44px; z-index: 5; }
.trade-page-arrow { width: 17px; height: 17px; z-index: 5; }
.trade-footer-action { width: 32px; height: 32px; z-index: 5; }
.trade-message {
  position: absolute;
  left: 22px;
  top: 309px;
  width: 246px;
  height: 22px;
  overflow: hidden;
  color: #5b2f12;
  font: 12px/18px "Courier New", monospace;
  text-overflow: clip;
  white-space: nowrap;
  pointer-events: none;
}
.trade-page-label {
  position: absolute;
  left: 218px;
  top: 344px;
  width: 34px;
  height: 18px;
  color: #3f200c;
  font: 14px/18px "Courier New", monospace;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

/* Native Emote Command window (nsys010 + ui020_01/nsys002). The decomp
   places this 175x312 panel at (575,50), with twenty 30x30 icons arranged in
   four columns and five rows. The DOM elements below are transparent hit
   targets; ui_render.js paints the original ADF frames underneath them. */
#hud-menu-panel.emote-command-menu,
#hud-menu-panel.show-emotion-menu {
  left: 575px;
  top: 50px;
  width: 175px;
  height: 312px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
}
#hud-menu-panel.emote-command-menu #hud-menu-header,
#hud-menu-panel.show-emotion-menu #hud-menu-header {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 175px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: block;
  color: #5b2f12;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
#hud-menu-panel.emote-command-menu #hud-menu-title,
#hud-menu-panel.show-emotion-menu #hud-menu-title {
  position: absolute;
  left: 25px;
  top: 6px;
  width: 125px;
  height: 19px;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  font: 14px/18px "Courier New", monospace;
  text-shadow: 1px 1px rgba(255,235,161,0.55);
}
#hud-menu-panel.emote-command-menu #hud-menu-close,
#hud-menu-panel.show-emotion-menu #hud-menu-close {
  position: absolute;
  z-index: 4;
  right: 4px;
  top: 4px;
  width: 21px;
  height: 21px;
  padding: 0;
  margin: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.emote-command-menu #hud-menu-subtitle,
#hud-menu-panel.show-emotion-menu #hud-menu-subtitle { display: none; }
#hud-menu-panel.emote-command-menu #hud-menu-content,
#hud-menu-panel.show-emotion-menu #hud-menu-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 175px;
  height: 312px;
  max-height: none;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  scrollbar-width: none;
}
.emote-command-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.show-emotion-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.emote-command-icon,
.show-emotion-icon,
.emote-command-page-arrow {
  position: absolute;
  box-sizing: border-box;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
}
.emote-command-icon,
.show-emotion-icon {
  width: 30px;
  height: 30px;
}
.emote-command-icon:focus-visible,
.show-emotion-icon:focus-visible,
.emote-command-page-arrow:focus-visible {
  outline: 1px dotted rgba(91,47,18,0.75);
  outline-offset: 1px;
}
.emote-command-pager {
  position: absolute;
  left: 0;
  top: 284px;
  width: 175px;
  height: 24px;
  pointer-events: none;
}
.emote-command-page-arrow {
  top: 0;
  width: 17px;
  height: 17px;
}
#emote-command-page-prev { left: 50px; }
#emote-command-page-next { left: 102px; }
.emote-command-page-label {
  position: absolute;
  left: 70px;
  top: 1px;
  width: 32px;
  height: 20px;
  color: #3f200c;
  font: 14px/20px "Courier New", monospace;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

/* Native Character Status page (nsys006, 311x384). The panel is positioned
   where the original client placed it: flush with the left edge of the game
   canvas and 72px below the top of the stage. Text and transparent hit areas
   sit over the decoded ADF artwork rendered by ui_render.js. */
#hud-menu-panel.character-status-menu {
  left: 0;
  top: 72px;
  width: 311px;
  height: 384px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
}
#hud-menu-panel.character-status-menu #hud-menu-header {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 311px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: block;
  color: #5b2f12;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
#hud-menu-panel.character-status-menu #hud-menu-title {
  position: absolute;
  left: 45px;
  top: 6px;
  width: 210px;
  height: 19px;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  font: 14px/18px "Courier New", monospace;
  text-shadow: 1px 1px rgba(255,235,161,0.55);
}
#hud-menu-panel.character-status-menu #hud-menu-close {
  position: absolute;
  z-index: 4;
  right: 5px;
  top: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.character-status-menu #hud-menu-subtitle { display: none; }
#hud-menu-panel.character-status-menu #hud-menu-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 311px;
  height: 384px;
  max-height: none;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  scrollbar-width: none;
}
#hud-menu-panel.character-status-menu .character-status-line {
  position: absolute;
  box-sizing: border-box;
  height: 18px;
  overflow: hidden;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
  white-space: nowrap;
  text-overflow: clip;
  pointer-events: none;
}
#hud-menu-panel.character-status-menu .identity-line {
  width: 260px;
}
#hud-menu-panel.character-status-menu .status-left-line {
  width: 82px;
}
#hud-menu-panel.character-status-menu .status-right-line {
  width: 190px;
}
#hud-menu-panel.character-status-menu .character-status-action,
#hud-menu-panel.character-status-menu .character-status-control {
  position: absolute;
  box-sizing: border-box;
  z-index: 5;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

/* Native System page (nsys006 + nui003a_02/nsys020/nsys015/nsys004). The
   browser HUD keeps this 311x384 panel flush with the right side of the
   800px stage. The controls below are transparent hit areas; ui_render.js
   paints their exact ADF frames on the artwork canvas. */
#hud-menu-panel.system-menu {
  left: auto;
  right: 0;
  top: 0;
  width: 311px;
  height: 384px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #5b2f12;
  font: 14px/20px "Courier New", monospace;
}
#hud-menu-panel.system-menu #hud-menu-header {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 311px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: block;
  color: #5b2f12;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
#hud-menu-panel.system-menu #hud-menu-title {
  position: absolute;
  left: 45px;
  top: 6px;
  width: 210px;
  height: 20px;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  font: 14px/20px "Courier New", monospace;
  text-shadow: 1px 1px rgba(255,235,161,0.55);
}
#hud-menu-panel.system-menu #hud-menu-close {
  position: absolute;
  z-index: 4;
  right: 5px;
  top: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.system-menu #hud-menu-subtitle { display: none; }
#hud-menu-panel.system-menu #hud-menu-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 311px;
  height: 384px;
  max-height: none;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  scrollbar-width: none;
}
#hud-menu-panel.system-menu .system-line {
  position: absolute;
  box-sizing: border-box;
  height: 20px;
  overflow: hidden;
  color: #5b2f12;
  font: 14px/20px "Courier New", monospace;
  white-space: nowrap;
  text-overflow: clip;
  pointer-events: none;
}
#hud-menu-panel.system-menu .system-server-line { width: 220px; }
#hud-menu-panel.system-menu .system-slider-label { width: 90px; }
#hud-menu-panel.system-menu .system-slider-value { width: 55px; }
#hud-menu-panel.system-menu .system-setting-label { width: 200px; }
#hud-menu-panel.system-menu .system-slider-arrow,
#hud-menu-panel.system-menu .system-radio,
#hud-menu-panel.system-menu .system-action,
#hud-menu-panel.system-menu .system-reset-control {
  position: absolute;
  box-sizing: border-box;
  z-index: 5;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.system-menu .system-radio {
  z-index: 4;
}

/* Native Work Skills page. It shares the 311x384 nsys006 parchment with the
   status page, but has the original guild/class header and scrollable skill
   pane instead of the status action row. The scroll sprites are painted by
   ui_render.js; these elements are transparent hit targets only. */
#hud-menu-panel.work-skills-menu {
  left: 0;
  top: 72px;
  width: 311px;
  height: 384px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
}
#hud-menu-panel.work-skills-menu #hud-menu-header {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 311px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: block;
  color: #5b2f12;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
#hud-menu-panel.work-skills-menu #hud-menu-title {
  position: absolute;
  left: 45px;
  top: 6px;
  width: 210px;
  height: 19px;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  font: 14px/18px "Courier New", monospace;
  text-shadow: 1px 1px rgba(255,235,161,0.55);
}
#hud-menu-panel.work-skills-menu #hud-menu-close {
  position: absolute;
  z-index: 4;
  right: 5px;
  top: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.work-skills-menu #hud-menu-subtitle { display: none; }
#hud-menu-panel.work-skills-menu #hud-menu-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 311px;
  height: 384px;
  max-height: none;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  scrollbar-width: none;
}
#hud-menu-panel.work-skills-menu .work-skills-line {
  position: absolute;
  box-sizing: border-box;
  width: 260px;
  height: 18px;
  overflow: hidden;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
  white-space: nowrap;
  text-overflow: clip;
  pointer-events: none;
}
#hud-menu-panel.work-skills-menu .work-skills-body {
  position: absolute;
  left: 16px;
  top: 108px;
  width: 278px;
  height: 198px;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
}
#hud-menu-panel.work-skills-menu .work-skills-empty {
  position: absolute;
  left: 18px;
  top: 9px;
  width: 238px;
  height: 18px;
  overflow: hidden;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
  white-space: nowrap;
  text-overflow: clip;
}
#hud-menu-panel.work-skills-menu .work-skills-scroll-up,
#hud-menu-panel.work-skills-menu .work-skills-scroll-thumb,
#hud-menu-panel.work-skills-menu .work-skills-scroll-down,
#hud-menu-panel.work-skills-menu .work-skills-control {
  position: absolute;
  box-sizing: border-box;
  z-index: 5;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.work-skills-menu .work-skills-scroll-thumb {
  pointer-events: none;
  cursor: default;
}

/* Native Pet List page. This uses the same 311x384 nsys006 parchment as
   Character Status and Work Skills. The visible controls are transparent DOM
   hit targets; ui_render.js paints their exact ADF frames on the artwork
   canvas underneath them. */
#hud-menu-panel.pet-list-menu {
  left: 0;
  top: 72px;
  width: 311px;
  height: 384px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
}
#hud-menu-panel.pet-list-menu #hud-menu-header {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 311px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: block;
  color: #5b2f12;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
#hud-menu-panel.pet-list-menu #hud-menu-title {
  position: absolute;
  left: 45px;
  top: 6px;
  width: 210px;
  height: 19px;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  font: 14px/18px "Courier New", monospace;
  text-shadow: 1px 1px rgba(255,235,161,0.55);
}
#hud-menu-panel.pet-list-menu #hud-menu-close {
  position: absolute;
  z-index: 4;
  right: 5px;
  top: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.pet-list-menu #hud-menu-subtitle { display: none; }
#hud-menu-panel.pet-list-menu #hud-menu-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 311px;
  height: 384px;
  max-height: none;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  scrollbar-width: none;
}
#hud-menu-panel.pet-list-menu .pet-list-empty {
  position: absolute;
  left: 34px;
  top: 53px;
  width: 238px;
  height: 18px;
  overflow: hidden;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
  white-space: nowrap;
  text-overflow: clip;
  pointer-events: none;
}
#hud-menu-panel.pet-list-menu .pet-list-scroll-up,
#hud-menu-panel.pet-list-menu .pet-list-scroll-thumb,
#hud-menu-panel.pet-list-menu .pet-list-scroll-down,
#hud-menu-panel.pet-list-menu .pet-list-action,
#hud-menu-panel.pet-list-menu .pet-list-control {
  position: absolute;
  box-sizing: border-box;
  z-index: 5;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.pet-list-menu .pet-list-scroll-thumb {
  pointer-events: none;
  cursor: default;
}

/* Native Friendly page. It shares the Pet List/Work Skills parchment and
   scroll rail, but adds the Name/Trait fields and four social controls shown
   by the original client. */
#hud-menu-panel.friendly-menu {
  left: 0;
  top: 72px;
  width: 311px;
  height: 384px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
}
#hud-menu-panel.friendly-menu #hud-menu-header {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 311px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: block;
  color: #5b2f12;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
#hud-menu-panel.friendly-menu #hud-menu-title {
  position: absolute;
  left: 45px;
  top: 6px;
  width: 210px;
  height: 19px;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  font: 14px/18px "Courier New", monospace;
  text-shadow: 1px 1px rgba(255,235,161,0.55);
}
#hud-menu-panel.friendly-menu #hud-menu-close {
  position: absolute;
  z-index: 4;
  right: 5px;
  top: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.friendly-menu #hud-menu-subtitle { display: none; }
#hud-menu-panel.friendly-menu #hud-menu-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 311px;
  height: 384px;
  max-height: none;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  scrollbar-width: none;
}
#hud-menu-panel.friendly-menu .friendly-line {
  position: absolute;
  box-sizing: border-box;
  width: 260px;
  height: 18px;
  overflow: hidden;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
  white-space: nowrap;
  text-overflow: clip;
  pointer-events: none;
}
#hud-menu-panel.friendly-menu .friendly-body {
  position: absolute;
  left: 16px;
  top: 108px;
  width: 278px;
  height: 198px;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
}
#hud-menu-panel.friendly-menu .friendly-empty {
  position: absolute;
  left: 18px;
  top: 9px;
  width: 238px;
  height: 18px;
  overflow: hidden;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
  white-space: nowrap;
  text-overflow: clip;
}
#hud-menu-panel.friendly-menu .friendly-scroll-up,
#hud-menu-panel.friendly-menu .friendly-scroll-thumb,
#hud-menu-panel.friendly-menu .friendly-scroll-down,
#hud-menu-panel.friendly-menu .friendly-action,
#hud-menu-panel.friendly-menu .friendly-control {
  position: absolute;
  box-sizing: border-box;
  z-index: 5;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.friendly-menu .friendly-scroll-thumb {
  pointer-events: none;
  cursor: default;
}

/* Native Inventory composition. The original client builds this page from
   nsys007 (upper equipment sheet) and nsys009 (the lower stat/item sheet),
   which makes it taller than the other 311x384 system windows. ui_render.js
   paints those ADFs; these elements are transparent hit targets only. */
#hud-menu-panel.inventory-menu {
  left: auto;
  right: 0;
  top: 0;
  width: 311px;
  height: 483px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
}
#hud-menu-panel.inventory-menu #hud-menu-header {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 311px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: block;
  color: #5b2f12;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
#hud-menu-panel.inventory-menu #hud-menu-title {
  position: absolute;
  left: 45px;
  top: 6px;
  width: 210px;
  height: 19px;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  font: 14px/18px "Courier New", monospace;
  text-shadow: 1px 1px rgba(255,235,161,0.55);
}
#hud-menu-panel.inventory-menu #hud-menu-close {
  position: absolute;
  z-index: 4;
  right: 5px;
  top: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.inventory-menu #hud-menu-subtitle { display: none; }
#hud-menu-panel.inventory-menu #hud-menu-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 311px;
  height: 483px;
  max-height: none;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  scrollbar-width: none;
}
#hud-menu-panel.inventory-menu .inventory-stat-line {
  position: absolute;
  box-sizing: border-box;
  width: 140px;
  height: 18px;
  overflow: hidden;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
  white-space: nowrap;
  text-overflow: clip;
  pointer-events: none;
}
#hud-menu-panel.inventory-menu .inventory-equipment-slot,
#hud-menu-panel.inventory-menu .inventory-item-slot,
#hud-menu-panel.inventory-menu .inventory-scroll-up,
#hud-menu-panel.inventory-menu .inventory-scroll-thumb,
#hud-menu-panel.inventory-menu .inventory-scroll-down {
  position: absolute;
  box-sizing: border-box;
  z-index: 5;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-shadow: none;
  box-shadow: none;
  opacity: 1;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.inventory-menu .inventory-equipment-slot::-moz-focus-inner,
#hud-menu-panel.inventory-menu .inventory-item-slot::-moz-focus-inner,
#hud-menu-panel.inventory-menu .inventory-scroll-up::-moz-focus-inner,
#hud-menu-panel.inventory-menu .inventory-scroll-thumb::-moz-focus-inner,
#hud-menu-panel.inventory-menu .inventory-scroll-down::-moz-focus-inner {
  padding: 0;
  border: 0;
}
#hud-menu-panel.inventory-menu .inventory-equipment-slot:focus,
#hud-menu-panel.inventory-menu .inventory-item-slot:focus,
#hud-menu-panel.inventory-menu .inventory-scroll-up:focus,
#hud-menu-panel.inventory-menu .inventory-scroll-thumb:focus,
#hud-menu-panel.inventory-menu .inventory-scroll-down:focus {
  outline: none;
}
#hud-menu-panel.inventory-menu .inventory-equipment-slot:disabled,
#hud-menu-panel.inventory-menu .inventory-item-slot:disabled {
  cursor: default;
}
#hud-menu-panel.inventory-menu .inventory-scroll-thumb {
  pointer-events: none;
  cursor: default;
}

/* Native Buy/Sell window (nsys023, 328x366). The parchment and row rails are
   painted from the original ADF; these transparent DOM nodes only provide
   live counters, item hit targets, quantity arrows, paging, and submission. */
#hud-menu-panel.vendor-menu {
  left: 236px;
  top: 18px;
  width: 328px;
  height: 366px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
}
#hud-menu-panel.vendor-menu #hud-menu-header {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 328px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: block;
  color: transparent;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
#hud-menu-panel.vendor-menu #hud-menu-title {
  position: absolute;
  left: 88px;
  top: 5px;
  width: 170px;
  height: 20px;
  overflow: hidden;
  color: #5b2f12;
  font: 14px/20px "Courier New", monospace;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  text-shadow: 1px 1px rgba(255,235,161,0.55);
}
#hud-menu-panel.vendor-menu #hud-menu-close {
  position: absolute;
  z-index: 7;
  right: 8px;
  top: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.vendor-menu #hud-menu-subtitle { display: none; }
#hud-menu-panel.vendor-menu #hud-menu-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 328px;
  height: 366px;
  max-height: none;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  scrollbar-width: none;
}
#hud-menu-panel.vendor-menu .vendor-line {
  position: absolute;
  box-sizing: border-box;
  height: 18px;
  overflow: hidden;
  color: #3f200c;
  font: 12px/18px "Courier New", monospace;
  white-space: nowrap;
  text-overflow: clip;
  pointer-events: none;
}
#hud-menu-panel.vendor-menu .vendor-total,
#hud-menu-panel.vendor-menu .vendor-remaining { width: 130px; }
#hud-menu-panel.vendor-menu .vendor-cash { width: 112px; }
#hud-menu-panel.vendor-menu .vendor-column-price { width: 72px; text-align: center; }
#hud-menu-panel.vendor-menu .vendor-column-sum { width: 45px; text-align: center; }
#hud-menu-panel.vendor-menu .vendor-column-exist { width: 42px; text-align: center; }
#hud-menu-panel.vendor-menu .vendor-price { width: 86px; }
#hud-menu-panel.vendor-menu .vendor-sum { width: 35px; text-align: right; }
#hud-menu-panel.vendor-menu .vendor-exist { width: 31px; text-align: center; }
#hud-menu-panel.vendor-menu .vendor-weight {
  width: 205px;
  font-size: 12px;
}
#hud-menu-panel.vendor-menu .vendor-item-slot,
#hud-menu-panel.vendor-menu .vendor-quantity-arrow,
#hud-menu-panel.vendor-menu .vendor-page-arrow,
#hud-menu-panel.vendor-menu .vendor-submit-control {
  position: absolute;
  box-sizing: border-box;
  z-index: 8;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color: transparent;
  background: transparent;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.vendor-menu .vendor-item-slot:focus,
#hud-menu-panel.vendor-menu .vendor-quantity-arrow:focus,
#hud-menu-panel.vendor-menu .vendor-page-arrow:focus,
#hud-menu-panel.vendor-menu .vendor-submit-control:focus {
  outline: none;
}
#hud-menu-panel.vendor-menu .vendor-item-slot::-moz-focus-inner,
#hud-menu-panel.vendor-menu .vendor-quantity-arrow::-moz-focus-inner,
#hud-menu-panel.vendor-menu .vendor-page-arrow::-moz-focus-inner,
#hud-menu-panel.vendor-menu .vendor-submit-control::-moz-focus-inner {
  padding: 0;
  border: 0;
}
#hud-menu-panel.vendor-menu .vendor-item-slot { z-index: 9; }
#hud-menu-panel.vendor-menu .vendor-quantity-arrow {
  width: 17px;
  height: 17px;
}
#hud-menu-panel.vendor-menu .vendor-page-arrow {
  width: 17px;
  height: 17px;
}
#hud-menu-panel.vendor-menu .vendor-page-arrow:disabled {
  cursor: default;
  opacity: 0.86;
}
#hud-menu-panel.vendor-menu .vendor-page-label {
  position: absolute;
  left: 281px;
  top: 319px;
  width: 25px;
  height: 18px;
  color: #3f200c;
  font: 14px/18px "Courier New", monospace;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
#hud-menu-panel.vendor-menu .vendor-currency-icon {
  position: absolute;
  width: 15px;
  height: 18px;
  pointer-events: none;
}
#hud-menu-panel.vendor-menu .vendor-submit-control {
  left: 281px;
  top: 331px;
  width: 43px;
  height: 31px;
}

/* Native Send Quick Message page (nsys011, 555x456). The background already
   contains the eight parchment rows, message preview, and footer rail. DOM
   nodes below are transparent text/hit targets; ui_render.js paints nsys015
   footer icons and the shared nsys001 scrollbar sprites. */
#hud-menu-panel.quick-message-menu {
  left: 50px;
  top: 15px;
  width: 555px;
  height: 456px;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #3f200c;
  font: 14px/20px "Courier New", monospace;
}
#hud-menu-panel.quick-message-menu #hud-menu-header {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 555px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: block;
  color: #5b2f12;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
#hud-menu-panel.quick-message-menu #hud-menu-title {
  position: absolute;
  left: 175px;
  top: 6px;
  width: 205px;
  height: 20px;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  font: 14px/20px "Courier New", monospace;
  text-shadow: 1px 1px rgba(255,235,161,0.55);
}
#hud-menu-panel.quick-message-menu #hud-menu-close {
  position: absolute;
  z-index: 4;
  right: 9px;
  top: 5px;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.quick-message-menu #hud-menu-subtitle { display: none; }
#hud-menu-panel.quick-message-menu #hud-menu-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 555px;
  height: 456px;
  max-height: none;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  scrollbar-width: none;
}
#hud-menu-panel.quick-message-menu .quick-message-list {
  position: absolute;
  left: 13px;
  top: 31px;
  width: 510px;
  height: 176px;
  display: grid;
  grid-template-rows: repeat(8, 22px);
  gap: 0;
  pointer-events: none;
}
#hud-menu-panel.quick-message-menu .quick-message-row {
  display: block;
  width: 510px;
  height: 22px;
  box-sizing: border-box;
  padding: 0 10px;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #3f200c;
  font: 14px/22px "Courier New", monospace;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.quick-message-menu .quick-message-row:hover {
  background: rgba(255, 244, 198, 0.2);
}
#hud-menu-panel.quick-message-menu .quick-message-preview {
  position: absolute;
  left: 14px;
  top: 224px;
  width: 525px;
  height: 166px;
  box-sizing: border-box;
  padding: 10px 12px;
  color: #3f200c;
  font: 14px/20px "Courier New", monospace;
  white-space: pre-wrap;
  overflow: hidden;
  pointer-events: none;
}
#hud-menu-panel.quick-message-menu .quick-message-scroll-thumb,
#hud-menu-panel.quick-message-menu .quick-message-scroll-down,
#hud-menu-panel.quick-message-menu .quick-message-action {
  position: absolute;
  z-index: 5;
  display: block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
#hud-menu-panel.quick-message-menu .quick-message-scroll-thumb {
  left: 525px;
  top: 177px;
  width: 13px;
  height: 13px;
  pointer-events: none;
  cursor: default;
}
#hud-menu-panel.quick-message-menu .quick-message-scroll-down {
  left: 525px;
  top: 192px;
  width: 13px;
  height: 13px;
}
#hud-menu-panel.quick-message-menu .quick-message-footer {
  position: absolute;
  left: 0;
  top: 0;
  width: 555px;
  height: 456px;
  pointer-events: none;
}
#hud-menu-panel.quick-message-menu .quick-message-action {
  top: 414px;
  width: 32px;
  height: 32px;
}
#hud-menu-panel.quick-message-menu .quick-message-action:nth-child(1) { left: 19px; }
#hud-menu-panel.quick-message-menu .quick-message-action:nth-child(2) { left: 69px; }
#hud-menu-panel.quick-message-menu .quick-message-action:nth-child(3) { left: 119px; }
#hud-menu-panel.quick-message-menu .quick-message-action:nth-child(4) { left: 169px; }
#hud-menu-panel.quick-message-menu .quick-message-action:nth-child(5) { left: 451px; }
#hud-menu-panel.quick-message-menu .quick-message-action:nth-child(6) { left: 501px; }

.hud-menu-section { margin: 0 0 8px; }
.hud-menu-section-title {
  margin: 0 0 4px;
  padding-bottom: 2px;
  color: #7d4218;
  border-bottom: 1px solid rgba(105,71,42,0.42);
  font-weight: bold;
}
.hud-menu-list { display: grid; gap: 4px; }
.hud-menu-action,
.hud-menu-row {
  box-sizing: border-box;
  min-height: 27px;
  padding: 4px 7px;
  color: #563119;
  background: rgba(231, 219, 174, 0.72);
  border: 1px solid #a27b43;
  font: 12px/17px "Courier New", monospace;
  text-align: left;
}
.hud-menu-action { width: 100%; cursor: pointer; }
.hud-menu-action:hover { color: #301708; background: #f1d28a; }
.hud-menu-action:disabled { color: #89918c; background: rgba(174,184,183,0.55); border-color: #8b9893; cursor: default; }
.hud-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hud-menu-row strong { color: #7a3d14; font-weight: normal; }
.hud-menu-note { padding: 7px 5px; color: #667576; font-style: italic; }
.hud-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.hud-menu-cell {
  min-height: 42px; padding: 4px 2px; box-sizing: border-box;
  color: #6a3b1a; background: rgba(174,184,183,0.48);
  border: 1px solid rgba(90,112,108,0.8); text-align: center;
  font: 10px/12px "Courier New", monospace; white-space: pre-line;
  overflow: hidden; text-overflow: ellipsis;
}
.hud-menu-cell.filled { color: #4b2b16; background: rgba(241,210,138,0.8); border-color: #a27b43; cursor: pointer; }
.hud-menu-cell.filled:hover { background: #f1d28a; }
.hud-menu-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.hud-menu-stat { min-height: 22px; padding: 2px 4px; background: rgba(231,219,174,0.62); border-bottom: 1px solid rgba(105,71,42,0.25); }
.hud-menu-stat b { color: #7a3d14; font-weight: normal; }
.hud-menu-inline { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.hud-menu-inline .hud-menu-action { width: auto; flex: 1 1 auto; }

/* EXP bar (full width, y=41-45).
   Adjust --exp-bar-start to change where the fill begins (px from left).
   Adjust --exp-bar-width to change how wide the track is. */
#top-exp-track {
  position: absolute;
  left: 273px;
  top: 32px;
  width: 223px;          /* native width of ui/topbar/bar_exp.png */
  height: 4px;
  overflow: hidden;
  pointer-events: auto;
  cursor: help;
}
#xp-fill {
  width: 0%;
  height: 4px;
  background: none;      /* bar_exp fill drawn on canvas */
}
#music-control {
  position: absolute;
  right: 8px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
#music-control button {
  background: rgba(20,16,10,0.7);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
#music-vol { width: 70px; }

/* ---- Minimap (top-left, below the top status bar) ---- */
#ui-minimap {
  top: 50px;
  left: 4px;
  width: 180px;           /* scaled down from 288 to fit */
  height: 185px;          /* match the nui001d frame image so rectOf is correct */
}
#ui-minimap::before {
  content: "";
  position: absolute;
  top: 31px;             /* match #minimap-viewport position */
  left: 8px;
  width: 160px;
  height: 120px;
  background: #000;
  z-index: 0;
}
/* Minimap frame + close button drawn on this canvas (behind text/buttons).
   The frame art (nui001d, 174x185) and the X button (nsys003) render here at
   z-index 1 so #minimap-info (z-index 3) and #minimap-close (z-index 5) show
   on top of the frame's title bar. */
#minimap-bg-canvas {
  position: absolute;
  top: 0; left: 1px;
  width: 180px;
  height: 185px;
  background: transparent;
  z-index: 1;
  pointer-events: none;
  image-rendering: pixelated;
}
#ui-minimap > img:not(#minimap-map) {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
}
#minimap-info {
  position: absolute;
  top: 6px; left: 8px;
  right: 8px;
  height: 176px;
  font-size: 0.75rem;
  font-family: "Courier New", monospace;
  text-align: left;
  color: var(--text);
  z-index: 3;
}
#minimap-viewport {
  position: absolute;
  top: 31px;            /* decomp: origin+31 (aperture top inside frame art) */
  left: 8px;            /* decomp: origin+7, adjusted for 180px canvas width */
  width: 160px;          /* decomp: 167-7=160 */
  height: 120px;         /* decomp: 151-31=120 */
  overflow: hidden;
  z-index: 1;
}
#minimap-map {
  position: absolute;
  image-rendering: pixelated;
  display: none;
  /* width/height/left/top set by JS — the image is full-size and scrolled */
}
#minimap-close {
  position: absolute;
  top: 8px; right: 15px;
  width: 16px; height: 16px;
  padding: 0; margin: 0; border: 0; outline: none;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}
#minimap-arrow {
  position: absolute;
  display: none;
  width: 12px;
  height: 12px;
  z-index: 4;
  pointer-events: none;
  image-rendering: pixelated;
}
#map-name { line-height: 1.75; color: #000; }
#map-date { position: absolute; left: 7px; right: 0; bottom: 5px; color: #d53318; margin-top: 0; font-size: 0.75rem; }

/* ---- Chat mask: floating text above the bottom bar (no window frame) ---- */
#ui-chat {
  position: absolute;
  bottom: 74px;
  left: 2px;
  width: 440px;
  z-index: 7;
}
#chat-log {
  box-sizing: border-box;
  width: 100%;
  min-height: 100px;
  max-height: 140px;
  overflow: hidden;
  font-size: 14px;          /* default = Small tier (7x14); applyChatFontMode overrides */
  font-family: "Courier New", monospace;
  color: #fff;
  text-shadow: 0 0 2px #000, 1px 1px 1px #000;
  pointer-events: none;
  background: rgba(10,8,6,0.45);
  padding: 4px 6px 4px 22px;
  border-radius: 3px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#chat-log::-webkit-scrollbar { width: 0; height: 0; display: none; }
#chat-scroll-up, #chat-scroll-thumb, #chat-scroll-down {
  position: absolute;
  left: 1px;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  filter: none;
  transform: none;
  transition: none;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
}
#chat-scroll-up { top: -2px; }
#chat-scroll-thumb { top: 13px; pointer-events: none; }
#chat-scroll-down { bottom: 4px; }
#chat-log:empty::before {
  content: "Chat";
  color: rgba(255,255,255,0.3);
  font-style: italic;
}
#chat-log p { margin: 0 0 2px 0; word-wrap: break-word; }

/* ---- Party panel ----------------------------------------------------- */
/* The original client keeps party controls compact and over the map. This
   panel is deliberately plain DOM so it remains usable while the HUD canvas
   continues to draw the game's pixel artwork underneath. */
#party-panel {
  position: absolute;
  top: 50px;
  right: 5px;
  width: 190px;
  padding: 6px;
  display: none;
  pointer-events: auto;
  z-index: 12;
  color: #f3e3b4;
  font: 12px/1.25 "Courier New", monospace;
  background: rgba(35, 24, 15, 0.93);
  border: 1px solid #a27b43;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55), 0 2px 5px rgba(0,0,0,0.65);
}
.party-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #f0c75e;
  border-bottom: 1px solid rgba(162,123,67,0.65);
  padding-bottom: 3px;
}
#party-invite-state {
  color: #9fca7f;
  font-size: 10px;
}
#party-invite-state.off { color: #d77b63; }
.party-member-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 1px 0;
}
.party-member-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.party-member-name.leader::before { content: "★ "; color: #f0c75e; }
.party-member-hp { color: #a8c9e0; font-size: 10px; white-space: nowrap; }
.party-kick {
  padding: 1px 3px;
  color: #e9cfa0;
  background: #5d3823;
  border: 1px solid #9b7040;
  font: 10px "Courier New", monospace;
  cursor: pointer;
}
#party-leave {
  width: 100%;
  margin-top: 6px;
  padding: 3px 5px;
  color: #f1d9a1;
  background: #5d3823;
  border: 1px solid #9b7040;
  font: 11px "Courier New", monospace;
  cursor: pointer;
}
#party-leave:hover, .party-kick:hover { background: #7b4b2c; }
#party-leader-menu {
  position: absolute;
  top: 14px;
  left: 24px;
  width: 286px;
  min-height: 250px;
  display: none;
  pointer-events: auto;
  z-index: 15;
  box-sizing: border-box;
  padding: 0 9px 10px;
  color: #4b2b16;
  font: 14px/1.2 "Courier New", monospace;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.24) 25%, transparent 25%) 0 0 / 6px 6px,
    linear-gradient(315deg, rgba(255,255,255,0.14) 25%, transparent 25%) 0 0 / 6px 6px,
    #c5d0d0;
  border: 3px solid #e2aa4c;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #f6d27b, inset 0 0 0 4px #96602d, 2px 3px 0 rgba(0,0,0,0.45);
}
.party-leader-heading {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -7px 9px;
  padding: 0 8px 0 18px;
  color: #6b3914;
  background: linear-gradient(#f2c56b, #d58b32);
  border-bottom: 2px solid #a96525;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
  text-shadow: 1px 1px rgba(255,235,161,0.55);
}
#party-leader-close {
  width: 20px;
  height: 20px;
  padding: 0;
  color: #9a3b14;
  background: transparent;
  border: 0;
  font: bold 22px/16px Arial, sans-serif;
  cursor: pointer;
}
#party-leader-close:hover { color: #5d1e0d; }
#party-leader-members {
  min-height: 158px;
  padding: 3px 12px;
  background: rgba(196, 209, 210, 0.55);
  border-top: 1px solid rgba(73, 99, 100, 0.35);
  border-bottom: 1px solid rgba(73, 99, 100, 0.35);
}
.party-leader-member {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 31px;
  color: #5c351b;
  cursor: pointer;
}
.party-leader-member input,
.party-command-radio {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid #f0e9c5;
  border-radius: 50%;
  background: #aeb8b7;
  box-shadow: inset 1px 1px 2px rgba(45,57,55,0.6), 0 1px 0 #526b68;
  appearance: none;
  cursor: pointer;
}
.party-leader-member input:checked,
#party-disband.selected .party-command-radio {
  background: radial-gradient(circle, #f1d774 0 35%, #aeb8b7 40% 100%);
}
.party-leader-empty {
  padding: 12px 4px;
  color: #667576;
  font-size: 12px;
  font-style: italic;
}
#party-disband {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 10px;
  padding: 4px 12px;
  color: #5c351b;
  background: transparent;
  border: 0;
  font: 14px/1.2 "Courier New", monospace;
  text-align: left;
  cursor: pointer;
}
#party-disband:hover { color: #8d2f16; }
#party-target-hint {
  position: absolute;
  top: 51px;
  left: 270px;
  display: none;
  z-index: 13;
  pointer-events: none;
  padding: 4px 7px;
  color: #f5e6b8;
  background: rgba(35, 24, 15, 0.9);
  border: 1px solid #a27b43;
  font: 12px "Courier New", monospace;
  text-shadow: 1px 1px #000;
}

/* ---- Bottom bar: skill slots + chat input (nui001a, 800x70) ---- */
#ui-bottom-bar {
  bottom: 0; left: 0;
  width: 100%;
  height: 70px;
}
#ui-bottom-bar > img {
  width: 100%;
  height: 70px;
}
#bar-slots {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
.bar-slot {
  position: absolute;
  width: 20px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  pointer-events: auto;
  cursor: pointer;
}
#chat-input {
  position: absolute;
  left: 52px;
  top: 11px;
  width: 330px;
  height: 18px;
  background: transparent !important;
  border: 0 !important;
  border-style: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0;
  color: #000;
  font-size: 14px;          /* default = Small tier (7x14); applyChatFontMode overrides */
  line-height: 14px;
  font-family: "Courier New", monospace;
  padding: 0 4px;
  margin: 0;
  pointer-events: auto;
  caret-color: transparent;
  user-select: text;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#game-frame > #chat-input {
  top: auto;
  bottom: 41px;
  z-index: 69;
}
#chat-input::selection { background: transparent; }
#chat-input::placeholder { color: transparent; }
#chat-input:focus,
#chat-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
#friend-input {
  position: absolute;
  left: 270px;
  top: 42px;
  width: 140px;
  height: 20px;
  box-sizing: border-box;
  padding: 0 2px;
  margin: 0;
  color: #000;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font: 14px/14px "Courier New", monospace;
  pointer-events: auto;
  /* Use the same blinking horizontal underscore caret as the chat field. */
  caret-color: transparent;
  user-select: text;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#friend-input::selection { background: rgba(78, 124, 170, 0.35); }
#friend-input:focus,
#friend-input:focus-visible { outline: none !important; border: 0 !important; box-shadow: none !important; }
/* Custom blinking underscore carets (same concept as the login screen caret). */
#chat-caret,
#friend-caret {
  position: absolute;
  display: none;
  height: 18px;
  line-height: 14px;
  color: #000;
  font-size: 14px;          /* default = Small tier; applyChatFontMode overrides */
  font-family: "Courier New", monospace;
  pointer-events: none;
  animation: chat-caret-blink 1s steps(1) infinite;
  transform: translateY(2px);   /* drop the underscore to the text baseline */
}
#game-frame > #chat-caret { z-index: 69; }
@keyframes chat-caret-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Slash command hint tooltip (shown when chat input starts with /).
 * Positioned as a sibling of #ui-chat (not inside #ui-bottom-bar) so it
 * renders above the chat mask. */
#cmd-hint {
  position: absolute;
  left: 2px;
  bottom: 74px;
  max-width: 480px;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(10, 12, 20, 0.95);
  border: 1px solid rgba(100, 120, 160, 0.4);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 11px;
  font-family: "Courier New", monospace;
  color: #8b949e;
  line-height: 1.6;
  pointer-events: auto;
  z-index: 100;
  white-space: pre;
  user-select: text;
}
#cmd-hint .cmd-name {
  color: #79c0ff;
}
#cmd-hint .cmd-desc {
  color: #8b949e;
}
#cmd-hint .cmd-selected {
  background: rgba(100, 120, 160, 0.2);
}

/* ---- Cursor overlay ---- */
#cursor-overlay {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  display: none;
  image-rendering: pixelated;
  background: none; /* cursor_sheet drawn on canvas */
  z-index: 10;
}

/* ===== Side panel (connect/session/log) ===== */
#side-panel {
  position: fixed;
  left: 8px;
  top: 8px;
  width: 280px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 100;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 0.5rem;
  font-size: 0.8rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
}
#side-panel details {
  margin-bottom: 0.3rem;
}
#side-panel summary {
  cursor: pointer;
  font-variant: small-caps;
  color: var(--accent);
  font-weight: bold;
  padding: 0.2rem 0;
}
.side-section {
  padding: 0.4rem 0.2rem;
}
.side-section label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
}
.side-section input[type="text"],
.side-section input[type="password"] {
  width: 100%;
  padding: 0.2rem;
  background: #160f0a;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: 0.8rem;
}
.side-buttons {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.side-buttons button {
  flex: 1;
  padding: 0.3rem;
  font-size: 0.75rem;
}

/* small decorative flourish under the header */
header::after {
  content: "✦  ⋆  ✦";
  display: block;
  color: var(--accent);
  letter-spacing: 1.5rem;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* ===== Floating game window (Alt+P fallback for non-Chromium) ===== */
#floating-game-window {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 800px;
  z-index: 99999;
  background: #0a0e14;
  border: 2px solid #3a2a1d;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8);
  overflow: hidden;
  resize: both;
  min-width: 400px;
  min-height: 300px;
}
#float-titlebar {
  height: 28px;
  background: linear-gradient(180deg, #3a2a1d 0%, #2c2017 100%);
  color: #f4e8c8;
  font: 12px/28px "Courier New", monospace;
  padding: 0 10px;
  cursor: move;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#float-close {
  background: transparent;
  border: 1px solid #5a4a3d;
  color: #f4e8c8;
  font-size: 16px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
}
#float-close:hover { background: #e06848; border-color: #e06848; color: #fff; }

/* ===== Mobile: fullscreen 800x600 stage scaled to fit ===== */
@media (max-width: 850px) {
  body {
    padding: 0;
    max-width: none;
    overflow: hidden;
  }
  header { display: none; }
  /* The JS fitStage() computes scale = min(vw/800, vh/600) and applies
     transform: translate(-50%, -50%) scale(N) with center origin.
     Here we just reset conflicting desktop styles. */
  #loading-screen,
  #login-screen,
  #server-list-screen,
  #char-select-screen,
  #game-frame {
    position: fixed !important;
    top: 50%;
    left: 50%;
    width: 800px !important;
    height: 600px !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  /* Re-enable pointer events on chat input for mobile so tapping it
     focuses the input and opens the on-screen keyboard. The isOverUI()
     check already prevents movement clicks over the bottom bar. */
  #chat-input {
    pointer-events: auto !important;
    font-size: 16px; /* prevents iOS auto-zoom */
  }
}