html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1b2a1b;
  font-family: system-ui, sans-serif;
}

#scene {
  position: fixed;
  inset: 0;
}

#scene canvas {
  display: block;
}

.label {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  white-space: nowrap;
}

.npc-label {
  color: #ffb3b3;
}

#hp-panel {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #3d5230;
  border-radius: 8px;
  background: rgba(20, 28, 18, 0.85);
  color: #eaf2e0;
  font-size: 12px;
}

#hp-panel[hidden] {
  display: none;
}

#hp-bar {
  width: 120px;
  height: 10px;
  background: #16210f;
  border-radius: 5px;
  overflow: hidden;
}

#hp-fill {
  height: 100%;
  width: 100%;
  background: #c9433f;
  transition: width 0.2s ease-out;
}

#hp-text {
  min-width: 4.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#login {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 15, 10, 0.85);
  z-index: 10;
}

#login[hidden] {
  display: none;
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  background: #24331f;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  width: 260px;
}

#login-form h1 {
  margin: 0 0 8px;
  color: #eaf2e0;
  font-size: 22px;
  text-align: center;
}

#auth-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#login-status {
  color: #a9c98f;
  font-size: 13px;
  margin: 0;
  text-align: center;
}

#login-status[hidden] {
  display: none;
}

#logout-button {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 5;
  padding: 8px 14px;
  border: 1px solid #3d5230;
  border-radius: 8px;
  background: rgba(20, 28, 18, 0.85);
  color: #eaf2e0;
  font-size: 13px;
  cursor: pointer;
}

#logout-button[hidden] {
  display: none;
}

/* --- HUD panels ------------------------------------------------------------
   Shared look for every floating panel: dark translucent card, thin green
   rule. Layout: HP top-left, log bottom-left, action bar bottom-centre with
   the bag window opening above it. */
#inventory-panel, #action-bar, #message-log, #hp-panel {
  border: 1px solid #3d5230;
  border-radius: 8px;
  background: rgba(20, 28, 18, 0.88);
  color: #eaf2e0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

#inventory-panel[hidden], #action-bar[hidden], #message-log[hidden] {
  display: none;
}

/* --- Action bar (equipment + bag button) ----------------------------------- */
#action-bar {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px 20px;
}

#doll-panel {
  display: flex;
  gap: 6px;
}

.action-divider {
  width: 1px;
  align-self: stretch;
  margin-bottom: -12px;
  background: #3d5230;
}

.doll-slot, #bag-button {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px dashed #3d5230;
  border-radius: 6px;
  background: #16210f;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doll-slot.drag-over, #inventory-panel.drag-over {
  border-color: #6ba23a;
  background: #24331f;
}

.doll-slot-label {
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: #7f9670;
  text-transform: uppercase;
  pointer-events: none;
}

.doll-slot-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#bag-button {
  border-style: solid;
  cursor: pointer;
  padding: 0;
}

#bag-button:hover, #bag-button.open {
  border-color: #6ba23a;
  background: #24331f;
}

#bag-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  padding: 1px 4px;
  border-radius: 8px;
  background: #6ba23a;
  color: #10190b;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

#bag-count[hidden] {
  display: none;
}

/* --- Bag window -------------------------------------------------------------- */
/* Sits just above the action bar, right-aligned with it (the bag button is
   at the bar's right end); scrolls once there are more than five rows. */
#inventory-panel {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(calc(-50% + 60px));
  z-index: 7;
  width: 292px;
  padding: 8px 10px 10px;
}

.window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.window-header h2 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a9c98f;
}

.window-close {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #a9c98f;
  font-size: 18px;
  line-height: 18px;
  cursor: pointer;
}

.window-close:hover {
  background: #24331f;
  color: #eaf2e0;
}

.window-hint {
  margin: 8px 0 0;
  font-size: 10px;
  color: #7f9670;
}

#inventory-list {
  display: grid;
  grid-template-columns: repeat(6, 42px);
  grid-auto-rows: 42px;
  gap: 4px;
  max-height: calc(5 * 42px + 4 * 4px);
  overflow-y: auto;
}

.inventory-slot.empty { background: #121a0d; border-style: dashed; border-color: #243219; }
.inventory-slot.empty:hover { border-color: #243219; }
#bag-slots { margin-left: auto; margin-right: 8px; font-size: 11px; }
#bag-slots.full, #bag-count.full { color: #ff7a6a; }

#inventory-list:empty::after {
  content: 'Nothing in your bag yet.';
  grid-column: 1 / -1;
  color: #7f9670;
  font-size: 12px;
}

.inventory-slot {
  position: relative;
  border: 1px solid #2c3d22;
  border-radius: 5px;
  background: #16210f;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inventory-slot:hover {
  border-color: #6ba23a;
}

.inventory-slot .item-icon {
  background-color: transparent;
}

.inventory-count {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 10px;
  font-weight: 700;
  color: #eaf2e0;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
  pointer-events: none;
}

/* Only equipment-type items are draggable (see setInventory) -- the grab
   cursor is the cue that a slot can be dragged onto the action bar. */
.inventory-slot[draggable="true"] {
  cursor: grab;
}

.inventory-slot.drag-source {
  opacity: 0.4;
}

/* --- Message log ------------------------------------------------------------ */
#message-log {
  position: fixed;
  bottom: 12px;
  left: 12px;
  width: 340px;
  height: 118px;
  z-index: 5;
  padding: 6px 8px;
  background: rgba(20, 28, 18, 0.72);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Grows the log a little while typing so the input doesn't eat the lines. */
#message-log:has(#chat-form:not([hidden])) {
  height: 150px;
}

#chat-form[hidden] {
  display: none;
}

#chat-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #6ba23a;
  border-radius: 5px;
  background: #0f170a;
  color: #eaf2e0;
  font-size: 13px;
  outline: none;
}

#message-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: #c7d9b8;
}

.message-row {
  white-space: pre-wrap;
  word-break: break-word;
}

.message-row.category-chop { color: #a9c98f; }

/* Damage/kills this player is responsible for vs. damage/death this
   player is on the receiving end of -- deliberately as different as
   possible (warm gold vs. bold red) so the two are easy to tell apart at
   a glance in a fast-moving fight, not just two shades of orange. */
.message-row.category-combat-dealt { color: #e0c05a; }
.message-row.category-combat-taken { color: #ff6b6b; font-weight: 600; }
/* Other people's fights nearby: present but quieter than your own. */
.message-row.category-combat-other { color: #b9c7ab; }

.message-row.category-system { color: #8fb8d9; }
.message-row.category-chat { color: #f4f7ee; }

#auth-tabs {
  display: flex;
  gap: 4px;
  background: #16210f;
  border-radius: 8px;
  padding: 4px;
}

.auth-tab {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #a9c98f;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.auth-tab.active {
  background: #3d5230;
  color: #eaf2e0;
}

#login-form input, #login-form button {
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
}

#login-form input {
  background: #16210f;
  color: #eaf2e0;
  border: 1px solid #3d5230;
}

#login-form button {
  background: #6ba23a;
  color: #10190b;
  font-weight: 700;
  cursor: pointer;
}

#login-form button:disabled, #login-form input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#login-error {
  color: #ff8a80;
  font-size: 13px;
  margin: 0;
  text-align: center;
}

#login-error[hidden] {
  display: none;
}


.doll-slot-item .item-icon {
  background-color: transparent;
  cursor: grab;
}

/* Narrow screens: lift the log above the centred action bar so they don't
   collide. */
@media (max-width: 900px) {
  #message-log {
    bottom: 96px;
    width: min(340px, calc(100vw - 24px));
    height: 90px;
  }
}

/* Sign text: parchment, set apart from game-event messages. */
.message-row.category-sign { color: #ecd9a6; font-style: italic; }

/* --- Gold, click mode, shop -------------------------------------------------- */
#gold-display {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  color: #ebd27a;
  font-weight: 700;
}

#gold-display .item-icon { background-color: transparent; }
#gold-display { cursor: pointer; }

/* "How many?" prompt (dropping part of a stack, or gold) */
#amount-prompt {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
}

#amount-prompt[hidden] { display: none; }

#amount-form {
  width: 240px;
  padding: 10px 12px 12px;
  border: 1px solid #3d5230;
  border-radius: 8px;
  background: rgba(20, 28, 18, 0.97);
  color: #eaf2e0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

#amount-form h2 { margin: 0 0 8px; font-size: 14px; }
.amount-row { display: flex; align-items: center; gap: 6px; }
#amount-input { width: 80px; padding: 4px 6px; font: inherit; }
.amount-buttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }

#amount-form button {
  padding: 4px 10px;
  border: 1px solid #3d5230;
  border-radius: 5px;
  background: #1f2b1a;
  color: #eaf2e0;
  cursor: pointer;
}

#amount-form #amount-ok { background: #4a6b2f; border-color: #6ba23a; }

#mode-button {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #3d5230;
  border-radius: 6px;
  background: #16210f;
  color: #a9c98f;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mode-button.attack {
  border-color: #ff6a5a;
  background: #5a1f18;
  color: #ffb3a6;
  box-shadow: 0 0 0 2px rgba(255, 106, 90, 0.35), 0 0 12px rgba(255, 90, 70, 0.55);
  animation: attack-pulse 1.6s ease-in-out infinite;
}

#mode-button.attack #mode-label { color: #ffb3a6; font-weight: 700; }

/* Attack mode: banner at the top, and a red glow round the edge of the view. */
#attack-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 5px 12px;
  border: 1px solid #ff6a5a;
  border-radius: 999px;
  background: rgba(70, 18, 14, 0.9);
  color: #ffd2ca;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(255, 80, 60, 0.45);
  animation: attack-pulse 1.6s ease-in-out infinite;
}

#attack-banner[hidden] { display: none; }
#attack-banner span { color: #ff8a73; }

#attack-banner kbd {
  margin: 0 2px 0 8px;
  padding: 0 5px;
  border: 1px solid #ff8a73;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
}

#scene.attack-mode::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 70px rgba(200, 30, 20, 0.45);
}

@keyframes attack-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 106, 90, 0.35), 0 0 10px rgba(255, 90, 70, 0.45); }
  50% { box-shadow: 0 0 0 2px rgba(255, 106, 90, 0.6), 0 0 18px rgba(255, 90, 70, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
  #mode-button.attack, #attack-banner { animation: none; }
}

#shop-panel {
  position: fixed;
  top: 64px;
  right: 12px;
  z-index: 7;
  width: 300px;
  padding: 8px 10px 10px;
  border: 1px solid #3d5230;
  border-radius: 8px;
  background: rgba(20, 28, 18, 0.92);
  color: #eaf2e0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

#shop-panel[hidden] { display: none; }

#shop-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
}

#shop-list:empty::after {
  content: 'Nothing for sale right now.';
  color: #7f9670;
  font-size: 12px;
}

#shop-sell-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
}

#shop-sell-list[hidden] { display: none; }
#shop-list[hidden] { display: none; }

#shop-sell-list:empty::after {
  content: 'Nothing in your bag they want.';
  color: #7f9670;
  font-size: 12px;
}

#shop-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.shop-tab {
  flex: 1;
  padding: 5px;
  border: 1px solid #3d5230;
  border-radius: 6px;
  background: #16210f;
  color: #a9c98f;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.shop-tab.active { background: #3d5230; color: #eaf2e0; }

/* Market movement: cheaper than usual (good for you) green, dearer red. */
.shop-price.good { color: #7fdc6a; }
.shop-price.bad { color: #ff8a73; }

.shop-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 1px solid #2c3d22;
  border-radius: 6px;
  background: #16210f;
  font-size: 13px;
}

.shop-row .item-icon { background-color: transparent; }
.shop-row.sold-out { opacity: 0.5; }
.shop-qty { color: #7f9670; font-size: 11px; }
.shop-price { color: #ebd27a; font-weight: 700; white-space: nowrap; }

.shop-row button {
  padding: 4px 10px;
  border: none;
  border-radius: 5px;
  background: #6ba23a;
  color: #10190b;
  font-weight: 700;
  cursor: pointer;
}

.shop-row button:disabled {
  background: #2c3f24;
  color: #7f9670;
  cursor: not-allowed;
}

.message-row.category-npc { color: #cfe3ff; font-style: italic; }
.message-row.category-loot { color: #ebd27a; }

/* --- Level, XP, character sheet ------------------------------------------------ */
#hp-panel .bars { display: flex; flex-direction: column; gap: 3px; }

#level-badge {
  padding: 2px 6px;
  border-radius: 5px;
  background: #3d5230;
  color: #eaf2e0;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}

#xp-bar, #stats-xp-bar {
  height: 4px;
  border-radius: 2px;
  background: #16210f;
  overflow: hidden;
}

#stats-xp-bar { height: 8px; margin: 6px 0 2px; }
#xp-fill, #stats-xp-fill { height: 100%; width: 0; background: #b39ddb; }

#stats-button {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #3d5230;
  border-radius: 6px;
  background: #16210f;
  cursor: pointer;
}

#stats-button:hover, #stats-button.open { border-color: #6ba23a; background: #24331f; }

.stats-glyph {
  display: block;
  color: #a9c98f;
  font-size: 8px;
  font-weight: 700;
  line-height: 11px;
  letter-spacing: 0.05em;
}

#stats-points-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  padding: 1px 4px;
  border-radius: 8px;
  background: #b39ddb;
  color: #1b1330;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
}

#stats-points-badge[hidden] { display: none; }

#stats-panel {
  position: fixed;
  top: 64px;
  left: 12px;
  z-index: 7;
  width: 250px;
  padding: 8px 10px 10px;
  border: 1px solid #3d5230;
  border-radius: 8px;
  background: rgba(20, 28, 18, 0.92);
  color: #eaf2e0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

#stats-panel[hidden] { display: none; }
#stats-level { font-size: 15px; font-weight: 700; }

/* Avatar picker, top of the character sheet */
#avatar-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 8px;
}

#avatar-picker button {
  border: 1px solid #3d5230;
  border-radius: 6px;
  background: #1f2b1a;
  color: #eaf2e0;
  cursor: pointer;
}

#avatar-prev, #avatar-next { width: 24px; height: 56px; font-size: 18px; }
#avatar-preview { width: 58px; height: 58px; display: grid; place-items: center; padding: 0; }
#avatar-picker button:hover { border-color: #7fb35e; }
#avatar-count { margin-left: 4px; }

#avatar-grid {
  display: grid;
  grid-template-columns: repeat(7, 30px);
  gap: 3px;
  max-height: 140px;
  overflow-y: auto;
  margin-bottom: 8px;
}

#avatar-grid[hidden] { display: none; }

.avatar-cell {
  width: 30px;
  height: 30px;
  padding: 2px;
  border: 1px solid #2c3d22;
  border-radius: 4px;
  background: #1f2b1a;
  cursor: pointer;
}

.avatar-cell.selected { border-color: #fff2a8; background: #3a4a2a; }
.frame-sprite { pointer-events: none; }

.stat-row {
  display: grid;
  grid-template-columns: 1fr auto 26px;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid #2c3d22;
  font-size: 13px;
}

.stat-name small { display: block; color: #7f9670; font-size: 10px; }
.stat-value { font-weight: 700; font-size: 15px; }
.stat-gear.up { color: #7fdc6a; font-size: 11px; }
.stat-gear.down { color: #ff7a6a; font-size: 11px; }

.stat-row button {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 5px;
  background: #b39ddb;
  color: #1b1330;
  font-weight: 700;
  cursor: pointer;
}

.message-row.category-levelup { color: #cdb8ff; font-weight: 700; }
#stats-derived { font-size: 12px; margin-top: 4px; }

/* --- Spell slots --------------------------------------------------------------- */
.spell-slot { border-color: #5b4a86; }

.spell-key {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #b39ddb;
  pointer-events: none;
}

/* Darkens the slot from the top while the spell recovers; the number is
   seconds left. */
.spell-cooldown {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  pointer-events: none;
}

.spell-cooldown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--left, 0%);
  background: rgba(10, 8, 20, 0.78);
}

.spell-cooldown span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  /* A solid dark outline so the number reads over any tome colour. */
  -webkit-text-stroke: 1px #000;
  text-shadow: 0 0 2px #000, 0 0 4px #000, 1px 1px 0 #000, -1px -1px 0 #000;
}

.message-row.category-magic { color: #cdb8ff; }

/* --- Crafting window ------------------------------------------------------------ */
#craft-panel {
  position: fixed;
  top: 64px;
  right: 12px;
  z-index: 7;
  width: 320px;
  padding: 8px 10px 10px;
  border: 1px solid #3d5230;
  border-radius: 8px;
  background: rgba(20, 28, 18, 0.92);
  color: #eaf2e0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

#craft-panel[hidden] { display: none; }
#craft-odds { margin: 0 0 8px; line-height: 1.5; }

#craft-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
}

#craft-list:empty::after {
  content: 'Nothing can be made here.';
  color: #7f9670;
  font-size: 12px;
}

.craft-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 1px solid #2c3d22;
  border-radius: 6px;
  background: #16210f;
  font-size: 13px;
}

.craft-row .item-icon { background-color: transparent; }
.craft-ings { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 2px; font-size: 11px; }
.craft-ings small { font-size: 10px; color: #a9c98f; }
.craft-ings span { display: inline-flex; align-items: center; gap: 2px; }
.craft-ings .has { color: #7fdc6a; }
.craft-ings .lacks { color: #ff8a73; }

.craft-row button {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background: #6ba23a;
  color: #10190b;
  font-weight: 700;
  cursor: pointer;
}

.craft-row button:disabled { background: #2c3f24; color: #7f9670; cursor: not-allowed; }

/* Crafted items: bag and equipment slots bordered in their quality colour. */
[data-quality="crude"] { border: 1px solid #9a9a8a !important; }
[data-quality="fine"] { border: 1px solid #7fdc6a !important; }
[data-quality="superior"] { border: 1px solid #7fb8ff !important; box-shadow: inset 0 0 6px rgba(127, 184, 255, 0.35); }
[data-quality="masterwork"] { border: 1px solid #d9a0ff !important; box-shadow: inset 0 0 8px rgba(217, 160, 255, 0.45); }

/* --- Help ------------------------------------------------------------------------ */
#help-button {
  position: fixed;
  top: 12px;
  right: 96px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border: 1px solid #3d5230;
  border-radius: 8px;
  background: rgba(20, 28, 18, 0.85);
  color: #eaf2e0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

#help-button:hover { border-color: #6ba23a; }
#help-button[hidden] { display: none; }

#help-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 12, 8, 0.6);
}

#help-backdrop[hidden] { display: none; }

#help-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 18px 22px 22px;
  border: 1px solid #5a7a44;
  border-radius: 10px;
  background: #1b2a1b;
  color: #eaf2e0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}

#help-panel .window-close { position: absolute; top: 10px; right: 10px; }

/* Arrows left, on the weapon slot when a bow is worn. */
.ammo-count {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 10px;
  font-weight: 700;
  color: #eaf2e0;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
  pointer-events: none;
}

.ammo-count.empty { color: #ff7a6a; }