* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0b0e14;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #eee;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-touch-callout: none;   /* no native long-press menu on iOS (the contextmenu event is cancelled too) */
  user-select: none;
  -webkit-user-select: none;
}

#game-container, #game-container canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

.hidden { display: none !important; }

/* ---------- Overlays ---------- */
.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 14, 0.82);
  z-index: 50;
  touch-action: auto;
}
.login-card {
  background: #141a26;
  border: 1px solid #2c3a55;
  border-radius: 14px;
  padding: 28px 26px;
  width: min(92vw, 360px);
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.login-card h1 { margin: 0 0 6px; font-size: 26px; }
.subtitle { margin: 0 0 18px; color: #9fb0cc; font-size: 14px; }
.link-btn {
  background: none; border: none; color: #6ea8fe;
  font-size: 14px; margin-top: 12px; cursor: pointer; text-decoration: underline;
}
#logout-btn {
  min-height: 40px; padding: 0 14px; font-size: 14px;
  border-radius: 8px; border: 1px solid #2c3a55;
  background: #1a2233; color: #cfd8ea; cursor: pointer;
  align-self: flex-start;
}
/* Phase 6: mute toggle + fps meter */
#mute-btn {
  min-height: 44px; min-width: 44px; font-size: 20px;
  border-radius: 8px; border: 1px solid #2c3a55;
  background: #1a2233; color: #cfd8ea; cursor: pointer;
  align-self: flex-start; margin-top: 6px;
}
#fps-meter {
  position: fixed; left: 8px; bottom: 8px; z-index: 9999;
  background: rgba(0, 0, 0, 0.65); color: #7dff9a;
  font: 12px monospace; padding: 4px 8px; border-radius: 6px;
  pointer-events: none;
}
.big-btn {
  width: 100%; min-height: 52px;
  font-size: 20px; font-weight: bold;
  border: none; border-radius: 10px;
  background: linear-gradient(180deg, #3fae5a, #2c7f41);
  color: #fff; cursor: pointer;
}
.big-btn:active { transform: scale(0.98); }
.status { min-height: 20px; font-size: 13px; color: #9fb0cc; margin: 10px 0 0; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#hud > * { pointer-events: auto; }

#top-left {
  position: absolute; top: 10px; left: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
#hp-bar {
  position: relative;
  width: 170px; height: 26px;
  background: #3a0d0d; border: 2px solid #111; border-radius: 6px;
  overflow: hidden;
}
#hp-fill {
  height: 100%; width: 100%;
  background: linear-gradient(180deg, #e04040, #a02020);
  transition: width 0.25s;
}
#hp-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: bold; text-shadow: 0 1px 2px #000;
}
#combat-label {
  font-size: 14px; font-weight: bold; color: #ffd54a;
  text-shadow: 0 1px 3px #000;
}
#conn { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9fb0cc; }
#conn-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #e04040; display: inline-block;
}
#conn-dot.on { background: #3fae5a; }

#minimap {
  position: absolute; top: 10px; right: 10px;
  width: 140px; height: 140px;
  border: 2px solid #2c3a55; border-radius: 8px;
  background: #12300f;
}

#panel-toggle {
  position: absolute; top: 160px; right: 10px;
  width: 48px; height: 48px;
  font-size: 24px;
  border: 2px solid #2c3a55; border-radius: 10px;
  background: rgba(20, 26, 38, 0.92); color: #fff;
  cursor: pointer;
}
#side-panel {
  position: absolute; bottom: 10px; right: 10px;
  width: min(280px, 70vw); max-height: 52vh;
  display: flex; flex-direction: column;
  background: rgba(20, 26, 38, 0.94);
  border: 2px solid #2c3a55; border-radius: 10px;
  overflow: hidden;
}
#side-panel.collapsed { display: none; }
.tabs { display: flex; background: #1a1a1a; border-bottom: 2px solid #5a5a5a; }
.cr-tabs .tab {
  flex: 1; min-height: 48px;
  background: linear-gradient(180deg, #2a2a2a 0%, #1f1f1f 100%);
  border: 1px solid #3a3a3a; border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: #999; font-size: 20px; cursor: pointer;
  margin: 0 1px;
}
.cr-tabs .tab:hover { background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%); }
.cr-tabs .tab.active {
  background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
  border-color: #ffd54a;
  color: #ffd54a;
  box-shadow: inset 0 2px 0 #ffd54a;
}
.tab-panel { display: none; overflow-y: auto; padding: 8px; touch-action: pan-y; background: #1e1e1e; }
.tab-panel.active { display: block; }

/* 28-slot inventory grid */
.cr-inv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.cr-inv-slot {
  min-height: 56px;
  background: #0f0f0f;
  border: 2px solid #3a3a3a;
  border-radius: 4px;
}
.cr-inv-slot.empty {
  background: #0a0a0a;
  border-color: #2a2a2a;
  opacity: 0.5;
}
.cr-inv-slot.sel {
  border-color: #ffd54a;
  box-shadow: 0 0 6px rgba(255, 213, 74, 0.5);
}

#inv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.inv-slot {
  min-height: 52px;
  background: #0d1220; border: 1px solid #2c3a55; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; padding: 2px; text-align: center;
  overflow: hidden;
}
.inv-item { color: #cfe0ff; word-break: break-word; }
.inv-n { color: #ffd54a; font-weight: bold; }
.inv-empty { grid-column: 1 / -1; color: #667; text-align: center; padding: 16px 0; font-size: 13px; }

.skill-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 4px; border-bottom: 1px solid #22304a;
  font-size: 14px;
}
.skill-row:last-child { border-bottom: none; }
.skill-name { flex: 1; color: #cfe0ff; }
.skill-lv {
  background: #2c3a55; border-radius: 6px;
  padding: 3px 8px; font-weight: bold; color: #ffd54a; font-size: 13px;
}
.skill-xp { color: #66788f; font-size: 12px; }

/* Overlay close X button */
.overlay-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  background: #5a1a1a;
  border: 2px solid #8a2a2a;
  border-radius: 4px;
  color: #ffaaaa;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}
.overlay-x:hover {
  background: #7a2a2a;
  color: #fff;
}
.big-card { position: relative; }

/* Bottom icon bar */
#bottom-icon-bar {
  display: flex;
  justify-content: space-around;
  background: #1a1a1a;
  border-top: 2px solid #5a5a5a;
  padding: 6px 4px;
}
.bottom-icon {
  background: linear-gradient(180deg, #2a2a2a 0%, #1f1f1f 100%);
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  width: 40px; height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom-icon:hover {
  border-color: #c9a227;
  background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
}
.bottom-icon .medieval-icon {
  width: 24px; height: 24px;
}

/* Medieval icons */
.medieval-icon {
  display: inline-block;
  width: 24px; height: 24px;
  vertical-align: middle;
}
.medieval-icon svg {
  width: 100%; height: 100%;
  display: block;
}
.medieval-icon-svg svg {
  width: 28px; height: 28px;
}
.cr-tabs .tab .medieval-icon {
  width: 26px; height: 26px;
}
.cr-skill-icon.medieval-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

/* Equipment paper doll */
.cr-equip-paperdoll {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    ". head ."
    "cape neck ammo"
    "weapon body shield"
    ". legs ."
    "hands feet ring";
  gap: 6px;
  max-width: 240px;
  margin: 0 auto 12px;
  padding: 12px;
  background: #151515;
  border: 2px solid #5a5a5a;
  border-radius: 4px;
}
.cr-equip-slot[data-slot="head"] { grid-area: head; }
.cr-equip-slot[data-slot="weapon"] { grid-area: weapon; }
.cr-equip-slot[data-slot="body"] { grid-area: body; }
.cr-equip-slot[data-slot="shield"] { grid-area: shield; }
.cr-equip-slot[data-slot="legs"] { grid-area: legs; }
.cr-equip-slot[data-slot="cape"] { grid-area: cape; }
.cr-equip-slot[data-slot="neck"] { grid-area: neck; }
.cr-equip-slot[data-slot="ammo"] { grid-area: ammo; }
.cr-equip-slot[data-slot="hands"] { grid-area: hands; }
.cr-equip-slot[data-slot="feet"] { grid-area: feet; }
.cr-equip-slot[data-slot="ring"] { grid-area: ring; }
.cr-equip-slot { position: relative; }
.cr-equip-slot .slot-count { position: absolute; left: 3px; top: 1px; font: bold 11px sans-serif; color: #ffd54a; text-shadow: 1px 1px 0 #000; }
.gs-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.gs-table th { color: #c9a227; font-weight: normal; text-align: right; }
.gs-table td { text-align: right; padding: 1px 4px; }
.gs-table td:first-child { text-align: left; color: #aaa; }
.gs-other { margin-top: 6px; font-size: 12px; color: #bbb; }
.cr-equip-slot {
  width: 46px; height: 46px;
  background: #0f0f0f;
  border: 2px solid #3a3a3a;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 24px;
  margin: 0 auto;
}
.cr-equip-slot:hover { border-color: #ffd54a; }
.cr-equip-slot.filled { border-color: #6a6a6a; background: #1a1a1a; }
.cr-equip-icon { opacity: 0.4; }
.cr-equip-slot.filled .cr-equip-icon { opacity: 1; }
.cr-equip-stats {
  background: #0f0f0f;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 8px;
  font-size: 13px;
  color: #ccc;
  margin-bottom: 8px;
}

/* Devotion (prayer) grid */
.cr-prayer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.cr-prayer-cell {
  background: #0f0f0f;
  border: 2px solid #3a3a3a;
  border-radius: 4px;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
}
.cr-prayer-cell:hover { border-color: #ffd54a; }
.cr-prayer-cell.active {
  border-color: #ffd54a;
  background: #2a2a1a;
  box-shadow: 0 0 8px rgba(255, 213, 74, 0.4);
}
.cr-prayer-cell.locked { opacity: 0.4; cursor: not-allowed; }
.cr-prayer-icon { font-size: 24px; }
.cr-prayer-name { font-size: 10px; color: #999; margin-top: 2px; }
.cr-prayer-pts {
  text-align: center;
  padding: 8px;
  background: #0f0f0f;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  margin-bottom: 8px;
  color: #ffd54a;
  font-weight: bold;
}

/* Emote grid */
.cr-emote-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.cr-emote-cell {
  background: #0f0f0f;
  border: 2px solid #3a3a3a;
  border-radius: 4px;
  padding: 10px 4px;
  text-align: center;
  cursor: pointer;
}
.cr-emote-cell:hover { border-color: #ffd54a; background: #1a1a1a; }
.cr-emote-icon { font-size: 28px; }
.cr-emote-name { font-size: 11px; color: #999; margin-top: 4px; }

/* Spellbook grid */
.cr-spell-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

/* Settings */
.cr-settings { display: flex; flex-direction: column; gap: 8px; }
.cr-btn {
  background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
  border: 2px solid #5a5a5a;
  border-radius: 4px;
  color: #ffd54a;
  font-weight: bold;
  padding: 12px;
  cursor: pointer;
  font-size: 14px;
}
.cr-btn:hover { border-color: #ffd54a; background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%); }

/* Skills grid */
.cr-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #1a1a1a;
  border: 3px solid #5a5a5a;
  border-radius: 4px;
  padding: 4px;
  /* Stone texture border */
  box-shadow: inset 0 0 0 1px #2a2a2a, 0 2px 8px rgba(0,0,0,0.5);
}
.cr-skill-cell {
  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  padding: 6px 4px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.cr-skill-cell:hover {
  background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
  border-color: #ffd54a;
}
.cr-skill-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}
.cr-skill-level {
  font-size: 16px;
  font-weight: bold;
  color: #ffd54a;
  text-shadow: 1px 1px 0 #000;
  line-height: 1.1;
}
.cr-skill-xp {
  font-size: 10px;
  color: #999;
  line-height: 1;
}
.cr-total-level {
  grid-column: 1 / -1;
  text-align: center;
  padding: 8px;
  background: #0f0f0f;
  border-top: 2px solid #5a5a5a;
  color: #ffd54a;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 1px 1px 0 #000;
}

/* ---------- Chat ---------- */
#chat-panel {
  position: absolute; left: 10px; bottom: 10px;
  width: min(330px, 72vw);
  display: flex; flex-direction: column;
  background: rgba(10, 14, 22, 0.78);
  border: 1px solid #2c3a55; border-radius: 10px;
  overflow: hidden;
}
#chat-log {
  height: 120px; overflow-y: auto;
  padding: 6px 8px; font-size: 13px; line-height: 1.35;
  touch-action: pan-y; user-select: text; -webkit-user-select: text;
}
.chat-msg { margin: 1px 0; word-break: break-word; }
.chat-from { color: #ffd54a; font-weight: bold; }
.chat-sys { color: #7fd4ff; font-style: italic; }
#chat-row { display: flex; border-top: 1px solid #2c3a55; }
#chat-input {
  flex: 1; min-height: 44px;
  border: none; background: transparent; color: #fff;
  font-size: 15px; padding: 0 10px; outline: none;
  user-select: text; -webkit-user-select: text;
}
/* Minimize: a small button on the chat box's top-right corner (over the log, nothing moves);
   minimized, the box becomes a small "Chat" button in the same corner of the screen. */
#chat-min {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  width: 30px; height: 26px; padding: 0;
  border: 1px solid var(--gold-dim, #8a7030); border-radius: 4px;
  background: rgba(20, 16, 10, 0.88); color: var(--gold-hi, #ffd54a);
  font-size: 18px; font-weight: bold; line-height: 1; cursor: pointer;
  touch-action: manipulation;
}
#chat-min:hover { border-color: var(--gold, #c9a227); }
#chat-mini {
  position: absolute; left: 10px; bottom: 10px;
  min-height: 44px; min-width: 72px; padding: 0 16px;
  background: rgba(28, 24, 18, 0.9); color: var(--gold-hi, #ffd54a);
  border: 2px solid var(--gold, #c9a227); border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  font-size: 15px; font-weight: bold; cursor: pointer;
  touch-action: manipulation;
}
#chat-send {
  min-width: 64px; min-height: 44px;
  border: none; background: #2c5f8a; color: #fff;
  font-size: 15px; font-weight: bold; cursor: pointer;
}

/* ---------- Toast ---------- */
#toast {
  position: absolute; top: 14px; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(20, 26, 38, 0.95);
  border: 1px solid #ffd54a; border-radius: 10px;
  color: #ffd54a; font-size: 15px; font-weight: bold;
  padding: 10px 18px; white-space: nowrap;
  opacity: 0; transition: opacity 0.25s, transform 0.25s;
  pointer-events: none; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  #minimap { width: 104px; height: 104px; }
  #panel-toggle { top: 124px; }
  #side-panel { bottom: 10px; top: auto; }
  #hp-bar { width: 130px; height: 24px; }
  #chat-panel { width: min(300px, 66vw); }
  #chat-log { height: 92px; }
}

/* ---------- Phase 2: gear, friends, bank, shop ---------- */
#coins-row, .coins-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: bold; color: #ffd54a;
  padding: 6px 4px;
}
#inv-grid.sel-mode .inv-slot { cursor: pointer; }
.inv-slot.sel {
  border-color: #ffd54a;
  box-shadow: 0 0 0 2px #ffd54a;
}
#inv-actions { padding-top: 8px; }
.sel-name {
  font-size: 14px; color: #cfe0ff; text-align: center;
  margin-bottom: 6px; min-height: 18px;
}
.btn-row { display: flex; gap: 6px; }
.btn-row.wrap { flex-wrap: wrap; }
.btn-row.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.btn-row.grid2 button { min-width: 0; }
.btn-row button {
  flex: 1; min-height: 44px; min-width: 70px;
  border-radius: 8px; border: 1px solid #2c3a55;
  background: #22304a; color: #fff; font-size: 14px; font-weight: bold;
  cursor: pointer;
}
.btn-row button:active { background: #2c3f5e; }

#gear-stats {
  font-size: 14px; color: #ffd54a; font-weight: bold;
  padding: 6px 4px; text-align: center;
}
.gear-slot {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid #22304a; font-size: 14px;
}
.gear-slot .g-name { flex: 1; color: #9fb0cc; }
.gear-slot .g-item { flex: 2; color: #cfe0ff; text-align: right; }
.gear-slot.equipped .g-item { color: #ffd54a; }

.friend-row, .block-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid #22304a; font-size: 14px;
}
.friend-row .f-name, .block-row .f-name { flex: 1; color: #cfe0ff; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #667; flex: none; }
.dot.on { background: #3fae5a; }
.mini-btn {
  min-height: 44px; min-width: 52px; padding: 0 10px;
  border-radius: 8px; border: 1px solid #2c3a55;
  background: #22304a; color: #fff; font-size: 13px; font-weight: bold;
  cursor: pointer; flex: none;
}
#friend-add-row, #block-add-row { display: flex; gap: 6px; margin: 6px 0; }
#friend-add-row input, #block-add-row input {
  flex: 1; min-height: 44px; min-width: 0;
  border-radius: 8px; border: 1px solid #2c3a55;
  background: #0d1220; color: #fff; font-size: 15px; padding: 0 10px;
  user-select: text; -webkit-user-select: text;
}
#friend-add-row button, #block-add-row button {
  min-height: 44px; min-width: 64px;
  border-radius: 8px; border: none;
  background: #2c5f8a; color: #fff; font-size: 14px; font-weight: bold;
  cursor: pointer; flex: none;
}
.friends-sub {
  font-size: 13px; color: #9fb0cc; font-weight: bold;
  margin: 10px 0 2px; text-transform: uppercase; letter-spacing: 0.5px;
}
.friends-empty { color: #667; font-size: 13px; text-align: center; padding: 10px 0; }
.chat-pm { color: #d48aff; }

/* ---------- Bank & shop overlays ---------- */
.big-card {
  background: #141a26;
  border: 1px solid #2c3a55;
  border-radius: 14px;
  padding: 18px;
  width: min(94vw, 480px);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  touch-action: pan-y;
}
.big-card h2 { margin: 0 0 4px; font-size: 22px; text-align: center; }
.big-card h3 {
  margin: 14px 0 6px; font-size: 15px; color: #9fb0cc;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.big-card .big-btn { margin-top: 14px; }
.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.slot-grid .inv-slot.sel {
  border-color: #7fd4ff;
  box-shadow: 0 0 0 2px #7fd4ff;
}
.qty-row {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 15px; color: #9fb0cc; margin: 6px 0;
}
.qty {
  min-width: 52px; min-height: 44px;
  border-radius: 8px; border: 1px solid #2c3a55;
  background: #0d1220; color: #9fb0cc; font-size: 15px; font-weight: bold;
  cursor: pointer;
}
.qty.active { background: #2c5f8a; color: #fff; border-color: #2c5f8a; }
.shop-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid #22304a; font-size: 14px;
}
.shop-row .s-name { flex: 1; color: #cfe0ff; }
.shop-row .s-stats { color: #66788f; font-size: 12px; }
.shop-row .s-price { color: #ffd54a; font-weight: bold; white-space: nowrap; }
.shop-empty { color: #667; font-size: 13px; text-align: center; padding: 8px 0; }

/* Phase 3: crafting UI */
.hint {
  font-size: 12px; color: #9fb0cc; text-align: center;
  padding: 6px 4px 0; font-style: italic;
}
#action-busy {
  position: fixed; left: 50%; bottom: 118px; transform: translateX(-50%);
  background: rgba(10, 16, 30, 0.85); border: 1px solid #2c3a55;
  color: #ffd54a; font-size: 14px; font-weight: bold;
  padding: 8px 18px; border-radius: 20px; z-index: 60;
  pointer-events: none; white-space: nowrap;
}
#action-busy::after {
  content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 8px;
  border-radius: 50%; background: #ffd54a;
  animation: busyPulse 0.7s ease-in-out infinite alternate;
}
@keyframes busyPulse { from { opacity: 0.25; } to { opacity: 1; } }
.recipe-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid #22304a; font-size: 14px;
}
.recipe-row .r-name { flex: 1; color: #cfe0ff; }
.recipe-row .r-sub { display: block; font-size: 12px; color: #9fb0cc; }
.recipe-row button {
  min-height: 44px; min-width: 76px; padding: 0 12px;
  border-radius: 8px; border: 1px solid #2c3a55;
  background: #22304a; color: #fff; font-size: 14px; font-weight: bold;
  cursor: pointer;
}
.recipe-row button:active { background: #2c3f5e; }

/* ---------- Phase 4: combat ---------- */
.fight-sec { margin-bottom: 14px; }
.fight-title { font-size: 14px; font-weight: bold; color: #ffd54a; margin-bottom: 6px; }
#stance-row button.active, #style-row button.active { background: #2c5f8a; border-color: #7fd4ff; }
.spell-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 6px;
}
.spell-row.sel { border-color: #b44dff; background: rgba(180,77,255,0.10); }
.spell-row .r-name { flex: 1; color: #cfe0ff; font-size: 14px; }
.spell-row .r-sub { display: block; font-size: 12px; color: #9fb0cc; }
#bless-bar {
  height: 14px; background: #241a2e; border: 1px solid #6a5a8a;
  border-radius: 7px; overflow: hidden; margin-bottom: 8px;
}
#bless-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #b44dff, #e0a0ff);
  transition: width 0.3s;
}
#spec-bar {
  height: 14px; background: #2e1a1a; border: 1px solid #8a5a5a;
  border-radius: 7px; overflow: hidden; margin-bottom: 8px;
}
#spec-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ff6b35, #ffd23f);
  transition: width 0.3s;
}
#spec-btn .cost { opacity: 0.7; font-size: 0.9em; }
#bless-pts { color: #e0a0ff; font-weight: bold; }
#splat-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.splat {
  position: absolute; transform: translate(-50%, -100%);
  font-size: 20px; font-weight: bold; color: #ffd54a;
  text-shadow: 0 2px 4px #000, 0 0 6px rgba(0,0,0,0.8);
  animation: splat-rise 1.1s ease-out forwards;
  pointer-events: none; white-space: nowrap;
}
.splat.hurt { color: #ff6b6b; }
.splat.miss { color: #9fb0cc; font-size: 15px; font-style: italic; }
@keyframes splat-rise {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -100%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -220%) scale(1); }
}
#boss-banner {
  position: absolute; top: 54px; left: 50%; transform: translateX(-50%);
  background: rgba(60, 8, 8, 0.92); border: 2px solid #ff4040; border-radius: 10px;
  color: #ffb0b0; font-size: 17px; font-weight: bold;
  padding: 8px 20px; pointer-events: none; white-space: nowrap;
  animation: boss-pulse 1.6s ease-in-out infinite;
}
@keyframes boss-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,64,64,0.4); }
  50% { box-shadow: 0 0 22px rgba(255,64,64,0.9); }
}

/* ---------- Phase 5: quests, NPCs, regions, map ---------- */
#region-banner {
  position: absolute; top: 100px; left: 50%; transform: translateX(-50%);
  background: rgba(10, 20, 40, 0.88); border: 1px solid #7fd4ff; border-radius: 12px;
  color: #dff1ff; text-align: center; padding: 10px 26px; pointer-events: none;
  max-width: 86vw; animation: region-in 0.4s ease-out;
}
#region-name { font-size: 22px; font-weight: bold; color: #ffd54a; }
#region-desc { font-size: 13px; color: #b3d9ff; margin-top: 2px; }
@keyframes region-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#map-btn {
  position: absolute; right: 12px; top: 160px; font-size: 26px;
  background: rgba(10, 20, 40, 0.8); border: 1px solid #7fd4ff; border-radius: 10px;
  padding: 8px 10px; cursor: pointer;
}
#zoom-controls {
  position: absolute; right: 12px; top: 220px; display: flex; flex-direction: column; gap: 8px;
}
#zoom-controls button {
  font-size: 22px; width: 44px; height: 44px;
  background: rgba(10, 20, 40, 0.8); border: 1px solid #7fd4ff; border-radius: 10px;
  color: #fff; cursor: pointer;
}
.npc-role { text-align: center; color: #8aa0c0; font-size: 13px; margin-bottom: 8px; }
#npc-text { font-size: 15px; line-height: 1.45; color: #eee; margin: 0 0 12px; }
#npc-options { display: flex; flex-direction: column; gap: 8px; }
#npc-options button {
  min-height: 44px; font-size: 15px; border-radius: 8px; cursor: pointer;
  background: #1d3a5f; color: #dff1ff; border: 1px solid #7fd4ff;
}
#npc-options button:active { background: #2a4f7d; }
.quest {
  border: 1px solid #444; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.quest.active { border-color: #ffd54a; }
.quest.done { border-color: #2fd44a; opacity: 0.75; }
.q-name { font-weight: bold; font-size: 15px; color: #ffd54a; }
.quest.done .q-name { color: #2fd44a; }
.q-stage { font-size: 13px; color: #dff1ff; margin-top: 2px; }
.q-prog { color: #7fd4ff; font-weight: bold; }
.q-desc { font-size: 13px; color: #b0b0c0; margin-top: 2px; }
.q-giver { font-size: 13px; color: #b3d9ff; margin-top: 2px; }
.q-done { font-size: 13px; color: #2fd44a; margin-top: 2px; }

/* ----- context menu (right-click / long-press) ----- */
#ctx-menu {
  position: fixed; z-index: 1000; min-width: 180px; max-width: 260px;
  background: rgba(12, 22, 40, 0.97); border: 1px solid #7fd4ff; border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6); padding: 6px; display: none;
}
#ctx-menu.show { display: block; }
#ctx-menu .ctx-title {
  font-size: 13px; color: #ffd54a; font-weight: bold; padding: 6px 10px 4px;
  border-bottom: 1px solid rgba(127, 212, 255, 0.25); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ctx-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; margin: 2px 0;
  background: transparent; border: none; border-radius: 6px; color: #dff1ff;
  font-size: 15px; cursor: pointer; min-height: 44px;
}
#ctx-menu button:hover, #ctx-menu button:active { background: #1d3a5f; }
#ctx-menu button.ctx-danger { color: #ff9a9a; }

/* ----- amount input modal (bank withdraw/deposit X) ----- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: rgba(12, 22, 40, 0.98); border: 1px solid #7fd4ff; border-radius: 12px;
  padding: 20px; min-width: 260px; max-width: 90vw; text-align: center;
}
.modal-box h3 { color: #ffd54a; margin: 0 0 12px; font-size: 17px; }
.modal-box input[type="number"] {
  width: 100%; padding: 10px; font-size: 18px; text-align: center;
  background: #0a1628; border: 1px solid #7fd4ff; border-radius: 8px; color: #fff;
  margin-bottom: 14px; box-sizing: border-box;
}
.modal-box .btn-row { display: flex; gap: 10px; justify-content: center; }
.modal-box .btn-row button {
  padding: 10px 24px; font-size: 15px; border-radius: 8px; cursor: pointer;
  background: #1d3a5f; color: #dff1ff; border: 1px solid #7fd4ff; min-height: 44px;
}
.modal-box .btn-row button:active { background: #2a4f7d; }

/* ----- XP drops (floating notifications) ----- */
#xp-drops {
  position: fixed; right: 12px; top: 80px; z-index: 1500;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.xp-drop {
  background: rgba(10, 20, 40, 0.9); border: 1px solid #7fd4ff; border-radius: 8px;
  padding: 6px 12px; font-size: 14px; color: #dff1ff;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
}
.xp-drop.show { opacity: 1; transform: translateY(0); }
.xp-drop.fade { opacity: 0; transform: translateY(-10px); }
.xp-drop .xp-amt { color: #ffd54a; font-weight: bold; }
.xp-drop .xp-skill { color: #8aa0c0; font-size: 12px; }

/* ----- minimap ----- */
#minimap {
  position: fixed; right: 12px; top: 12px; z-index: 900;
  width: 160px; height: 160px; border-radius: 50%;
  border: 2px solid #7fd4ff; background: rgba(8, 16, 32, 0.85);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
#minimap canvas { width: 100%; height: 100%; border-radius: 50%; }

/* ===== Visual overhaul: stone, gold and parchment ===== */
:root {
  --cr-stone: #3a3226;
  --cr-stone-dark: #2a241a;
  --cr-gold: #d4a017;
  --cr-gold-light: #ffd54a;
  --cr-parchment: #d4c49a;
}

/* Side panel: stone texture with gold trim */
#side-panel {
  background: linear-gradient(180deg, #4a4030 0%, #3a3226 50%, #2a241a 100%);
  border: 3px solid #d4a017;
  border-radius: 4px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.6);
}

/* Tabs */
.tab {
  background: linear-gradient(180deg, #5a5040 0%, #3a3226 100%);
  border: 1px solid #d4a017;
  color: #d4c49a;
  text-shadow: 1px 1px 2px #000;
  font-weight: bold;
}
.tab.active {
  background: linear-gradient(180deg, #6a6048 0%, #4a4030 100%);
  color: #ffd54a;
  border-bottom: 3px solid #ffd54a;
}

/* Buttons: chunky, with a bevel */
button {
  background: linear-gradient(180deg, #6a6048 0%, #4a4030 50%, #3a3226 100%);
  border: 2px solid #d4a017;
  border-radius: 4px;
  color: #ffd54a;
  text-shadow: 1px 1px 2px #000;
  font-weight: bold;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(0,0,0,0.4);
  cursor: pointer;
}
button:hover {
  background: linear-gradient(180deg, #7a7050 0%, #5a5040 50%, #4a4030 100%);
}
button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
  transform: translateY(1px);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Inventory grid: slots */
#inv-grid {
  gap: 2px;
  background: #2a241a;
  padding: 4px;
  border: 2px solid #d4a017;
  border-radius: 4px;
}
.inv-slot {
  background: linear-gradient(180deg, #3a3226 0%, #2a241a 100%);
  border: 1px solid #5a5040;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

/* Card (the death screen) */
.login-card {
  background: linear-gradient(180deg, #4a4030 0%, #3a3226 50%, #2a241a 100%);
  border: 3px solid #d4a017;
  border-radius: 8px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5), 0 8px 32px rgba(0,0,0,0.7);
}
.login-card h1 {
  color: #ffd54a;
  text-shadow: 2px 2px 4px #000;
  font-size: 32px;
}

/* Minimap: gold rim */
#minimap {
  border: 3px solid #d4a017;
  box-shadow: 0 0 0 1px #000, 0 4px 16px rgba(0,0,0,0.6);
}

/* Context menu: parchment style */
.ctx-menu {
  background: linear-gradient(180deg, #d4c49a 0%, #c4b48a 100%);
  border: 2px solid #3a3226;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  color: #2a241a;
}
.ctx-menu .ctx-item {
  color: #2a241a;
  font-weight: bold;
}
.ctx-menu .ctx-item:hover {
  background: #b4a47a;
}

/* ===== Dunmere theme: one gold-on-dark-stone look for every HUD element =====
   (Overrides the older navy styles above; keep new UI inside these tokens.) */
:root {
  --stone-hi: #5a4e3a;
  --stone: #3a3226;
  --stone-lo: #2a241a;
  --stone-deep: #1c1812;
  --gold: #d4a017;
  --gold-hi: #ffd54a;
  --gold-dim: #8a6a1e;
  --parch: #e6d6ae;
  --parch-dim: #a8977a;
  --ink: #f2e8cf;
  --stone-grad: linear-gradient(180deg, #4a4030 0%, #3a3226 55%, #2a241a 100%);
  --btn-grad: linear-gradient(180deg, #6a5c42 0%, #4a4030 55%, #3a3226 100%);
  --btn-grad-hi: linear-gradient(180deg, #7c6c4c 0%, #5a4e3a 55%, #4a4030 100%);
  --btn-grad-on: linear-gradient(180deg, #8a6a24 0%, #6a501a 100%);
}
html, body { background: #14110c; color: var(--ink); }
.overlay { background: rgba(12, 9, 5, 0.8); }

/* Cards: login, dialogue, bank, shop, map, furnace, anvil */
.login-card, .big-card, .modal-box {
  background: var(--stone-grad);
  border: 3px solid var(--gold);
  border-radius: 8px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5), 0 8px 32px rgba(0,0,0,0.7);
  color: var(--ink);
}
.big-card h2, .modal-box h3 { color: var(--gold-hi); text-shadow: 2px 2px 3px #000; font-family: Georgia, "Times New Roman", serif; }
.login-card h1 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 1px; }
.big-card h3 { color: var(--parch); border-bottom: 1px solid var(--gold-dim); padding-bottom: 3px; }
.subtitle, .status, .hint, .npc-role { color: var(--parch-dim); }
.link-btn { color: var(--gold-hi); text-shadow: none; box-shadow: none; }

/* Text inputs */
#chat-input, #friend-add-row input, #block-add-row input,
.modal-box input[type="number"] {
  background: var(--stone-deep); color: var(--ink);
  border: 1px solid var(--gold-dim); border-radius: 4px;
}
#chat-input { border: none; background: transparent; }
#friend-add-row input:focus, #block-add-row input:focus,
.modal-box input[type="number"]:focus { outline: none; border-color: var(--gold-hi); }
::placeholder { color: #7d6f56; }

/* Every button family shares the stone bevel + gold trim */
.big-btn, #logout-btn, #mute-btn, #panel-toggle, #map-btn, #zoom-controls button, #chat-send,
.btn-row button, .recipe-row button, #npc-options button, .modal-box .btn-row button,
#friend-add-row button, #block-add-row button, .qty, .mini-btn, .cr-btn, .overlay-x {
  background: var(--btn-grad);
  border: 2px solid var(--gold);
  border-radius: 4px;
  color: var(--gold-hi);
  text-shadow: 1px 1px 2px #000;
  font-weight: bold;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 4px rgba(0,0,0,0.45);
}
.big-btn:hover, #logout-btn:hover, #mute-btn:hover, #panel-toggle:hover, #map-btn:hover, #zoom-controls button:hover,
#chat-send:hover, .btn-row button:hover, .recipe-row button:hover, #npc-options button:hover,
.modal-box .btn-row button:hover, #friend-add-row button:hover, #block-add-row button:hover, .qty:hover,
.mini-btn:hover, .cr-btn:hover, .overlay-x:hover {
  background: var(--btn-grad-hi); border-color: var(--gold-hi);
}
.btn-row button:active, .recipe-row button:active, #npc-options button:active, .modal-box .btn-row button:active {
  background: var(--btn-grad-on);
}
.big-btn { font-family: Georgia, "Times New Roman", serif; font-size: 20px; letter-spacing: 0.5px; }
#stance-row button.active, #style-row button.active, .qty.active {
  background: var(--btn-grad-on); border-color: var(--gold-hi); color: #fff3c4;
  box-shadow: inset 0 0 8px rgba(255, 213, 74, 0.35), 0 0 0 1px #000;
}
#npc-options button { text-align: left; padding: 0 14px; color: var(--ink); }
#chat-send { border-width: 0 0 0 2px; border-radius: 0; }
#map-btn, #zoom-controls button { color: var(--gold-hi); }
#mute-btn, #logout-btn { color: var(--gold-hi); }

/* Chat box */
#chat-panel {
  background: rgba(28, 24, 18, 0.86);
  border: 2px solid var(--gold); border-radius: 4px;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.5), 0 3px 10px rgba(0,0,0,0.5);
}
#chat-row { border-top: 1px solid var(--gold-dim); }
.chat-msg { color: var(--ink); text-shadow: 1px 1px 0 #000; }
.chat-sys { color: #e8c86a; }
.chat-pm { color: #f0a0e0; }

/* Panel interiors */
.tabs { background: var(--stone-lo); border-bottom: 2px solid var(--gold-dim); }
.tab-panel { background: rgba(20, 17, 12, 0.55); }
#bottom-icon-bar { background: var(--stone-lo); border-top: 2px solid var(--gold-dim); }
.bottom-icon { background: var(--btn-grad); border: 1px solid var(--gold-dim); box-shadow: none; }
.bottom-icon:hover { background: var(--btn-grad-hi); border-color: var(--gold); }
.bottom-icon.active { background: var(--btn-grad-on); border-color: var(--gold-hi); }
.inv-item, .skill-name, .gear-slot .g-item, .friend-row .f-name, .block-row .f-name,
.shop-row .s-name, .recipe-row .r-name, .spell-row .r-name, .q-stage { color: var(--ink); }
.gear-slot .g-name, .recipe-row .r-sub, .spell-row .r-sub, .shop-row .s-stats, .skill-xp, .q-desc, .q-giver { color: var(--parch-dim); }
.inv-empty, .friends-empty, .shop-empty { color: #7d6f56; }
.friends-sub { color: var(--parch); }
.shop-row, .skill-row, .friend-row, .block-row, .gear-slot { border-bottom-color: rgba(138, 106, 30, 0.35); }
.spell-row { border-color: var(--gold-dim); }
.spell-row.sel { border-color: var(--gold-hi); background: rgba(255, 213, 74, 0.08); }
.slot-grid .inv-slot.sel { border-color: var(--gold-hi); box-shadow: 0 0 0 2px var(--gold-hi); }
.slot-grid .inv-slot { background: linear-gradient(180deg, #3a3226 0%, #2a241a 100%); border: 1px solid #5a5040; }
.quest { background: rgba(0, 0, 0, 0.25); border-color: var(--gold-dim); }
.q-prog { color: var(--gold-hi); }

/* Magic tab spellbook grid */
.cr-spell-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 64px; padding: 4px 2px;
  background: linear-gradient(180deg, #2e2820 0%, #221d16 100%);
  border: 1px solid #5a5040; border-radius: 3px; box-shadow: none;
  color: var(--ink); text-shadow: 1px 1px 0 #000; font-weight: normal;
}
.cr-spell-cell:hover { border-color: var(--gold-hi); background: linear-gradient(180deg, #3a3226 0%, #2a241a 100%); }
.cr-spell-cell.sel { border-color: var(--gold-hi); box-shadow: inset 0 0 10px rgba(255, 213, 74, 0.35); }
.cr-spell-cell.locked { opacity: 0.45; }
/* Level met but runes missing: dark and unclickable, like a locked spell. */
.cr-spell-cell.norunes { opacity: 0.45; filter: grayscale(0.85) brightness(0.8); }
.cr-spell-cell.locked:hover, .cr-spell-cell.norunes:hover { border-color: #5a5040; background: linear-gradient(180deg, #2e2820 0%, #221d16 100%); cursor: not-allowed; }
.cr-spell-cell .sp-icon { font-size: 20px; color: #9ad0ff; line-height: 1; }
.cr-spell-cell.sel .sp-icon { color: var(--gold-hi); }
.cr-spell-cell .sp-name { font-size: 10px; line-height: 1.1; text-align: center; }
.cr-spell-cell .sp-lv { font-size: 10px; color: var(--gold-hi); }
#magic-info { margin-top: 6px; }

/* Floating HUD bits */
#toast, #action-busy, .xp-drop, #region-banner {
  background: var(--stone-grad);
  border: 2px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
}
#toast { border-radius: 4px; }
#action-busy, .xp-drop { border-radius: 4px; }
#region-banner { border-radius: 6px; color: var(--ink); }
#region-name { font-family: Georgia, "Times New Roman", serif; color: var(--gold-hi); text-shadow: 2px 2px 3px #000; }
#region-desc { color: var(--parch); }
.xp-drop { color: var(--ink); }
.xp-drop .xp-skill { color: var(--parch-dim); }
#conn { color: var(--parch-dim); text-shadow: 1px 1px 0 #000; }
#hp-bar { border: 2px solid #000; box-shadow: 0 0 0 1px var(--gold-dim); border-radius: 3px; }
#hp-fill { background: linear-gradient(180deg, #2fc04a, #1c8a31); }
#hp-bar { background: #8a1414; }

/* Right-click menu: a dark box with a gold title */
#ctx-menu {
  background: rgba(28, 24, 18, 0.97);
  border: 2px solid var(--gold); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.65);
}
#ctx-menu .ctx-title { color: var(--gold-hi); border-bottom-color: var(--gold-dim); }
#ctx-menu button {
  background: transparent; border: none; box-shadow: none; text-shadow: 1px 1px 0 #000;
  color: var(--ink); font-weight: normal; border-radius: 2px;
}
#ctx-menu button:hover, #ctx-menu button:active { background: rgba(212, 160, 23, 0.25); transform: none; }
#ctx-menu button.ctx-danger { color: #ff9a8a; }

/* World map */

/* Inventory slots: big icon, small name, the stack count in the corner */
#inv-grid .inv-slot, .slot-grid .inv-slot { position: relative; min-height: 50px; gap: 1px; }
#inv-grid .inv-ico, .slot-grid .inv-ico { font-size: 21px; line-height: 1; filter: drop-shadow(1px 1px 0 #000); }
#inv-grid .inv-item, .slot-grid .inv-item { font-size: 9.5px; line-height: 1.1; color: var(--parch); }
#inv-grid .inv-stack, .slot-grid .inv-stack { position: absolute; top: 2px; left: 4px; font-size: 11px; color: #ffff40; text-shadow: 1px 1px 0 #000; }
.cr-equip-slot.filled .cr-equip-icon { filter: drop-shadow(1px 1px 0 #000); }

/* ===== Item sprites (inline SVG, medieval style) ===== */
.mi { width: 100%; height: 100%; display: block; overflow: visible; }
#inv-grid .inv-ico, .slot-grid .inv-ico { width: 28px; height: 28px; opacity: 0.93; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.55)); font-size: 0; }
.cr-equip-icon { width: 34px; height: 34px; display: inline-block; opacity: 0.92; }
.cr-equip-icon.empty { opacity: 0.28; filter: grayscale(1) brightness(1.5) sepia(0.35); }
.cr-equip-slot.filled .cr-equip-icon { opacity: 0.94; filter: drop-shadow(1px 1px 0 #000); }
.st-ico, .coin-ico { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; opacity: 0.92; }
#coins-row .coin-ico, .coins-row .coin-ico { width: 20px; height: 20px; vertical-align: -4px; }
.s-ico { display: inline-block; width: 24px; height: 24px; flex: none; opacity: 0.93; }

/* ===== Speech bubbles ===== */
#bubble-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.bubble {
  position: absolute; left: 0; top: 0; max-width: 190px;
  background: rgba(244, 234, 208, 0.95); color: #2a1e10;
  border: 2px solid #5a4630; border-radius: 10px;
  padding: 4px 9px; font: 600 13px/1.25 Georgia, "Times New Roman", serif; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45); white-space: normal; word-break: break-word;
  transition: opacity 0.4s;
}
.bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: #5a4630; border-bottom: 0;
}
.bubble::before {
  content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); z-index: 1;
  border: 6px solid transparent; border-top-color: rgba(244, 234, 208, 0.95); border-bottom: 0;
}
.bubble.out { opacity: 0; }

/* ===== Character creator (2026-10-29: per part) ===== */
.creator-card { width: min(96vw, 900px); }
.creator-body { display: flex; gap: 14px; align-items: flex-start; justify-content: center; }
.creator-preview { flex: none; width: 300px; text-align: center; }
#creator-canvas {
  width: 300px; height: 380px; display: block; cursor: grab; touch-action: none;
  background: radial-gradient(ellipse at 50% 40%, #4a4232 0%, #241f17 75%);
  border: 2px solid var(--gold-dim); border-radius: 6px;
}
.cc-side { flex: 1; min-width: 0; max-width: 270px; }
.cc-head { color: var(--gold-hi); font-weight: bold; font-family: Georgia, "Times New Roman", serif; text-align: center;
  margin: 2px 0 8px; text-shadow: 1px 1px 0 #000; letter-spacing: 0.05em; }
.cc-rows { display: flex; flex-direction: column; gap: 6px; }
.cc-row { display: flex; align-items: center; gap: 6px; }
.cc-val { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 38px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid #3a2e1e; border-radius: 4px; }
.cc-label { color: var(--parch); font-size: 11px; font-weight: bold; font-family: Georgia, "Times New Roman", serif; opacity: 0.85; }
.cc-choice { color: var(--gold-hi); font-weight: bold; text-shadow: 1px 1px 0 #000; font-size: 13px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; }
.cc-val .cc-swatch { width: 54px; height: 14px; border-radius: 3px; border: 1px solid #1b130a; margin-top: 2px; }
.cc-arrow { width: 36px; height: 38px; padding: 0; font-size: 14px; flex: none; }
.cc-seg { display: flex; gap: 6px; }
.cc-seg button { min-height: 44px; padding: 0 14px; }
.cc-seg button.active, .cc-weapon.active { background: var(--btn-grad-on); border-color: var(--gold-hi); color: #fff3c4; }
.cc-weapons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.cc-weapon { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 4px 8px; font-size: 13px; }
.cc-weapon .mi { width: 28px; height: 28px; flex: none; }
#cc-weapon-desc { text-align: left; min-height: 18px; margin-top: 6px; }
.cc-actions { margin-top: 12px; align-items: center; flex-wrap: wrap; }
.cc-actions button:not(.big-btn) { min-height: 44px; padding: 0 16px; }
.cc-actions .big-btn { flex: 1; margin: 0; min-width: 140px; }
.save-status { font-style: normal; color: #9ad08a; }
@media (max-width: 760px) {
  /* a phone: the preview on top, Design and Colour side by side under it */
  .creator-body { flex-wrap: wrap; gap: 8px; }
  .creator-preview { order: -1; width: 100%; display: flex; flex-direction: column; align-items: center; }
  .creator-preview, #creator-canvas { height: 230px; }
  #creator-canvas { width: 182px; }
  .cc-side { flex: 1 1 45%; max-width: none; }
  .cc-arrow { width: 30px; height: 34px; }
  .cc-val { min-height: 34px; }
  .cc-choice { font-size: 12px; }
  .creator-preview .hint { display: none; }
}

/* Line-art icons that replaced emoji */
#mute-btn svg, #map-btn .medieval-icon, #panel-toggle .medieval-icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
#map-btn .medieval-icon svg, #panel-toggle .medieval-icon svg { width: 100%; height: 100%; }
#map-btn { padding: 8px; line-height: 0; }
.xp-ico { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.xp-ico svg { width: 100%; height: 100%; }
.cr-emote-icon, .cr-prayer-icon { width: 30px; height: 30px; margin: 0 auto; }
.cr-emote-icon svg, .cr-prayer-icon svg { width: 100%; height: 100%; }
.cr-spell-cell .sp-icon svg { width: 18px; height: 18px; }
#style-row .st-ico { width: 18px; height: 18px; vertical-align: -4px; }
#style-row button { white-space: nowrap; }

/* ----- Run energy orb (beside the minimap) ----- */
#run-orb {
  --run: 100%;
  position: fixed; right: 158px; top: 132px; z-index: 901;
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  border: 2px solid #d4a017; box-shadow: 0 0 0 1px #000, 0 3px 10px rgba(0,0,0,0.55);
  background: linear-gradient(to top, #c9a227 var(--run), #2a241a var(--run));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; font: bold 13px/1 Georgia, "Times New Roman", serif;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
#run-orb .run-icon { width: 20px; height: 20px; display: block; margin-bottom: 1px; }
#run-orb .run-icon svg { width: 20px; height: 20px; stroke: #fff; filter: drop-shadow(0 0 1px #000); }
#run-orb.off { background: linear-gradient(to top, #6b7a8c var(--run), #2a241a var(--run)); border-color: #8a8a8a; }
#run-orb.ex { background: linear-gradient(to top, #a33a2a var(--run), #2a1a16 var(--run)); border-color: #e05a3a;
  animation: run-ex 1.6s ease-in-out infinite; }
@keyframes run-ex { 50% { box-shadow: 0 0 0 1px #000, 0 0 14px rgba(224, 90, 58, 0.8); } }
@media (max-width: 640px) {
  #run-orb { right: 104px; top: 86px; width: 40px; height: 40px; font-size: 11px; }
  #run-orb .run-icon, #run-orb .run-icon svg { width: 16px; height: 16px; }
}

#autoret-btn.active { background: #2c5f8a; border-color: #7fd4ff; }

/* ----- Gravestone timer, Outlands depth, casting cursor ----- */
#grave-hud, #outlands-badge {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 902;
  padding: 4px 12px; border-radius: 4px; font: bold 13px Georgia, serif;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
#grave-hud { top: 10px; background: rgba(40, 30, 60, 0.92); color: #e0d0ff; border: 1px solid #9a86d8; cursor: pointer; }
#outlands-badge { top: 40px; background: rgba(70, 18, 12, 0.92); color: #ffd6c8; border: 1px solid #e05a3a; }
#grave-hud.hidden, #outlands-badge.hidden { display: none; }
.died-sub { color: #e8dcc0; max-width: 420px; margin: 8px auto 0; line-height: 1.4; }
body.casting #game-canvas, body.casting canvas { cursor: crosshair; }
.cr-spell-cell.util .sp-icon { color: #9fd4ff; }
.cr-prayer-cell.ward .cr-prayer-name { color: #9fd4ff; }

/* ---------- Phase C7: make-X, use mode, skill tooltip and guide ---------- */
.make-row { gap: 10px; }
.make-row .m-ico { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; }
.make-row .m-ico svg { width: 34px; height: 34px; }
.make-row.locked .r-name { color: #8a8f99; }
.make-row .lvl-low { color: #ff7b6b; font-weight: bold; }
.make-row .have-no { color: #ff9a8a; }
#use-hint {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%);
  background: rgba(10, 16, 30, 0.9); border: 1px solid #c8a85a; color: #ffe9a0;
  font-size: 14px; padding: 6px 14px; border-radius: 16px; z-index: 61; pointer-events: none;
}
#skill-tip {
  position: fixed; z-index: 80; pointer-events: none; min-width: 180px; max-width: 260px;
  background: rgba(12, 16, 26, 0.96); border: 1px solid #5a4a2a; border-radius: 8px;
  padding: 8px 10px; color: #e8dcc0; font-size: 13px; line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
#skill-tip b { color: #ffd54a; font-size: 14px; }
#skill-tip .tip-bar { height: 6px; background: #2a2a2a; border-radius: 3px; margin-top: 6px; overflow: hidden; }
#skill-tip .tip-bar span { display: block; height: 100%; background: linear-gradient(90deg, #c8a040, #ffd54a); }
.cr-skill-cell { cursor: pointer; }
/* Skill progression page: header (icon, level, XP bar, next unlock), then one section per level
   milestone, unlocked ones bright with a tick, locked ones dimmed with a padlock. */
.guide-card { --b-ico: 28px; --b-cell: 38px; width: min(96vw, 620px); max-height: 94vh; display: flex; flex-direction: column; position: relative; }
.gd-head { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.gd-ico { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #3a3226, #2a241a); border: 1px solid var(--gold-dim); border-radius: 6px; }
.gd-ico svg { width: 32px; height: 32px; }
.gd-head-text { flex: 1; min-width: 0; text-align: left; }
.gd-head-text h2 { margin: 0; text-align: left; }
.guide-sub { text-align: left; color: var(--parch-dim); font-size: 12.5px; margin: 2px 0 0; }
.gd-level { font-size: 28px; font-weight: bold; color: var(--gold-hi); line-height: 1; white-space: nowrap; }
.gd-level small { font-size: 13px; color: var(--parch-dim); margin-left: 3px; }
.gd-xp { margin: 10px 0 6px; }
.gd-bar { height: 10px; background: #161310; border: 1px solid #5a5040; border-radius: 5px; overflow: hidden; }
.gd-bar span { display: block; height: 100%; background: linear-gradient(90deg, #3a9a4a, #7ad46a); transition: width 0.3s; }
.gd-xp-text { font-size: 12px; color: var(--parch); margin-top: 3px; text-align: right; }
.gd-next { font-size: 13px; color: var(--parch); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--gold-dim); border-radius: 4px; padding: 6px 8px; }
.gd-next:empty { display: none; }
.gd-next-k { font-weight: bold; color: var(--gold-hi); margin-right: 4px; }
.gd-togo { color: var(--parch-dim); }
.gd-filter { display: flex; gap: 6px; margin: 8px 0 4px; }
.gd-filter .mini-btn { min-height: 30px; padding: 0 12px; font-size: 13px; }
.gd-filter .mini-btn.on { background: #5a4a1a; border-color: #c8a85a; color: #ffe9a0; }
.gd-list { flex: 1; min-height: 120px; overflow-y: auto; margin-bottom: 8px; }
.gd-ms { margin: 6px 0 2px; }
.gd-ms-head { display: flex; justify-content: space-between; align-items: center; padding: 3px 6px; border-radius: 3px;
  background: rgba(122, 212, 106, 0.12); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; }
.gd-ms.locked .gd-ms-head { background: rgba(0, 0, 0, 0.3); }
.gd-ms-lvl { font-weight: bold; color: var(--gold-hi); }
.gd-ms-state { color: #7ad46a; }
.gd-ms.locked .gd-ms-state { color: var(--parch-dim); }
.guide-row { display: flex; gap: 10px; padding: 5px 4px; border-bottom: 1px solid rgba(138, 106, 30, 0.25); font-size: 14px; align-items: center; }
.guide-row .g-cell { width: var(--b-cell); height: var(--b-cell); }
.guide-row .b-ico.medieval-icon-svg svg { width: 22px; height: 22px; }
.guide-row .g-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.guide-row .g-text { color: var(--ink); }
.guide-row .g-where { font-size: 11.5px; color: var(--parch-dim); margin-top: 1px; }
.guide-row .g-req { flex: none; width: 22px; text-align: center; color: #7ad46a; }
.guide-row.locked .g-text { color: #8a8f99; }
.guide-row.locked .g-cell { opacity: 0.5; filter: grayscale(0.7); }
.guide-row.locked .g-req { color: var(--parch-dim); }
@media (max-width: 560px) {
  .gd-level { font-size: 22px; }
  .guide-row { font-size: 13px; }
}

/* ---------- Phase C8: bank tabs, search, notes ---------- */
.bank-card { width: min(96vw, 560px); }
.bank-top { display: flex; justify-content: space-between; align-items: center; }
.bank-count { color: #9fb0cc; font-size: 13px; }
.bank-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 6px; }
.bank-tabs button {
  min-width: 44px; height: 40px; border-radius: 8px 8px 2px 2px; border: 1px solid #2c3a55;
  background: #0d1220; color: #c8b890; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px;
}
.bank-tabs button.active { background: #2c3f5e; border-color: #c8a85a; color: #ffe9a0; }
.bank-tabs button svg { width: 24px; height: 24px; }
.bank-search {
  width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid #2c3a55; background: #0d1220; color: #e8dcc0; font-size: 14px;
}
.bank-grid { grid-template-columns: repeat(6, 1fr); max-height: 34vh; overflow-y: auto; }
.bank-grid .tab-break { grid-column: 1 / -1; font-size: 11px; color: #8a7a4a; border-bottom: 1px solid #3a3020; padding-top: 4px; }
.bank-actions { flex-wrap: wrap; justify-content: center; }
.bank-actions button.on { background: #5a4a1a; border-color: #c8a85a; color: #ffe9a0; }
.h3-hint { font-size: 11px; color: #667; text-transform: none; letter-spacing: 0; }
.inv-ico.noted { position: relative; display: inline-flex; }
.inv-ico.noted::before {
  content: ''; position: absolute; inset: 2px 4px; background: #efe6c8; border: 1px solid #8a7a4a; border-radius: 2px; z-index: 0;
}
.inv-ico.noted svg { position: relative; z-index: 1; transform: scale(0.7); }

/* ---------- Phase C9: trade window ---------- */
.trade-card { width: min(96vw, 620px); }
.trade-cols { display: flex; gap: 10px; }
.trade-col { flex: 1; min-width: 0; }
.trade-col h3 { margin-top: 6px; }
.trade-grid { grid-template-columns: repeat(4, 1fr); min-height: 120px; background: rgba(0,0,0,0.18); border-radius: 8px; padding: 4px; }
.trade-val { color: #ffd54a; font-size: 12px; text-transform: none; letter-spacing: 0; }
.trade-warn { background: #4a1a14; border: 1px solid #c84a3a; color: #ffd0c0; border-radius: 8px; padding: 6px 10px; margin: 6px 0; text-align: center; font-weight: bold; }
.trade-card.confirm .trade-grid { border: 1px solid #c8a85a; }
#trade-ask {
  position: fixed; left: 50%; top: 104px; transform: translateX(-50%); z-index: 62;
  background: rgba(14, 18, 30, 0.95); border: 1px solid #c8a85a; color: #e8dcc0; border-radius: 12px;
  padding: 8px 12px; font-size: 14px; display: flex; gap: 8px; align-items: center;
}
#trade-ask button { min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #c8a85a; background: #3a3020; color: #ffe9a0; font-weight: bold; cursor: pointer; }
.big-btn.danger { background: #4a1a14; border-color: #8a3a2a; }

/* ---------- Phase C9: the Tradekeep exchange ---------- */
/* Item icons use the store window's scale everywhere in this window (search results, offer
   slots, the chosen item, recent trades): a 28 px sprite, framed like a shop slot where it
   stands alone. Sizes are fixed in px and capped, so no viewport or SVG can blow them up. */
.bourse-card { --b-ico: 28px; --b-cell: 38px; width: min(96vw, 660px); max-height: 94vh; position: relative; overflow-y: auto; }
.bourse-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; font-size: 13px; color: var(--parch-dim); margin-bottom: 8px; }
.bourse-sub .coins-row { margin: 0; font-size: 15px; color: var(--gold-hi); }
.b-ico { display: inline-flex; align-items: center; justify-content: center; width: var(--b-ico, 28px); height: var(--b-ico, 28px);
  max-width: 28px; max-height: 28px; flex: none; overflow: hidden; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6)); }
.b-ico svg, .b-ico .mi { width: 100%; height: 100%; max-width: 28px; max-height: 28px; display: block; }
.b-cell { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--b-cell); height: var(--b-cell);
  background: linear-gradient(180deg, #3a3226 0%, #2a241a 100%); border: 1px solid #5a5040; border-radius: 4px; box-sizing: border-box; }
.bourse-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 10px; }
.bourse-slot {
  display: flex; flex-direction: column; gap: 4px; min-height: 168px; padding: 8px;
  background: linear-gradient(180deg, #3a3226 0%, #2a241a 100%); border: 2px solid #5a5040; border-radius: 6px;
  color: var(--parch); font-size: 13px;
}
.bourse-slot.empty { align-items: center; justify-content: center; border-style: dashed; border-color: #6a5a3a; }
.bourse-slot .b-empty { color: var(--parch-dim); font-style: italic; margin-bottom: 8px; }
.bourse-slot .b-row { display: flex; gap: 6px; width: 100%; margin-top: auto; }
.bourse-slot .b-row button { flex: 1; min-height: 34px; font-size: 14px; }
.bourse-slot .b-buy { color: #a8f0a0; }
.bourse-slot .b-sell { color: #ffc890; }
.bourse-slot .b-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; }
.bourse-slot .b-kind { font-weight: bold; padding: 1px 6px; border-radius: 3px; background: #24402a; color: #a8f0a0; }
.bourse-slot.sell .b-kind { background: #4a2e1a; color: #ffc890; }
.bourse-slot .b-state { color: var(--parch-dim); }
.bourse-slot.done .b-state { color: #7ad46a; }
.bourse-slot.aborted .b-state { color: #ff8a7a; }
.bourse-slot .b-head { display: flex; gap: 6px; align-items: center; font-weight: bold; color: var(--gold-hi); min-width: 0; }
.bourse-slot .b-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bourse-slot .b-line { display: flex; justify-content: space-between; font-size: 12.5px; }
.bourse-slot .b-line b { color: var(--ink); }
.bourse-slot .b-bar { height: 8px; background: #161310; border: 1px solid #5a5040; border-radius: 4px; overflow: hidden; }
.bourse-slot .b-bar span { display: block; height: 100%; background: linear-gradient(90deg, #c87a1a, #ffb84a); }
.bourse-slot.done .b-bar span { background: linear-gradient(90deg, #3a9a4a, #7ad46a); }
.bourse-slot.aborted .b-bar span { background: #8a3a2a; }
.bourse-slot .b-collect { font-size: 11.5px; color: var(--gold-hi); min-height: 15px; }
.bourse-slot .b-abort { color: #ffb0a0; }
.bourse-form { margin: 2px 0 10px; }
.bf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.bf-head h3 { flex: 1; margin: 0; border: none; }
.bf-head .mini-btn, .bf-item .mini-btn { min-height: 32px; padding: 0 10px; }
.bf-hint { color: var(--parch-dim); font-size: 13px; padding: 6px 2px; }
.bf-warn { color: #ff9a7a; }
.bf-pick .bank-search { width: 100%; box-sizing: border-box; }
.bourse-results { max-height: min(46vh, 320px); overflow-y: auto; margin-top: 6px; }
.bourse-result { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 3px 6px; border-bottom: 1px solid rgba(138, 106, 30, 0.35); cursor: pointer; }
.bourse-result:hover { background: rgba(255, 213, 74, 0.08); }
.bourse-result .r-name { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bourse-result .r-sale { color: #a8d890; font-size: 12px; white-space: nowrap; }
.bourse-result .r-sale.none { color: var(--parch-dim); }
.bourse-result .r-guide { color: var(--gold-hi); font-size: 12.5px; white-space: nowrap; min-width: 64px; text-align: right; }
.bf-book { margin: 10px 0 0; padding: 6px 8px; font-size: 12.5px; color: var(--parch); background: rgba(0, 0, 0, 0.22); border-radius: 4px; }
.bf-book .bf-fill { margin-top: 3px; color: #ffc890; }
.bf-book .bf-fill.all { color: #7ad46a; }
.bourse-history { margin: -2px 0 10px; padding: 6px 8px; background: rgba(0, 0, 0, 0.22); border-radius: 4px; }
.bourse-history .bh-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--parch-dim); margin-bottom: 4px; }
.bourse-history .bh-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--parch); padding: 1px 0; }
.bourse-history .bh-kind { font-weight: bold; min-width: 52px; }
.bourse-history .bh-kind.buy { color: #a8f0a0; }
.bourse-history .bh-kind.sell { color: #ffc890; }
.bourse-history .bh-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bourse-history .bh-price { color: var(--gold-hi); white-space: nowrap; }
#bourse-place:disabled { opacity: 0.55; cursor: wait; }
.bourse-pack { grid-template-columns: repeat(7, 46px); grid-auto-rows: 46px; gap: 4px; justify-content: center; margin-top: 4px; }
.bourse-pack .shop-cell .inv-ico { margin-bottom: 0; }
.bf-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--gold-dim); border-radius: 4px; background: rgba(0, 0, 0, 0.25); }
.bf-item-text { flex: 1; min-width: 0; }
.bf-name { font-weight: bold; color: var(--gold-hi); font-size: 16px; }
.bf-sub { font-size: 12px; color: var(--parch-dim); }
.bf-row { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; align-items: center; margin-top: 10px; }
.bf-row label { color: var(--parch); font-size: 14px; }
.bf-row input { padding: 8px; border-radius: 4px; border: 1px solid var(--gold-dim); background: #161310; color: var(--ink); font-size: 16px; min-width: 0; }
.bf-btns { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.bf-btns .mini-btn { flex: 1; min-height: 34px; min-width: 56px; font-size: 14px; }
.bf-total { margin: 12px 0 8px; font-size: 15px; color: var(--parch); text-align: center; }
.bf-total b { color: var(--gold-hi); }
.bourse-card #bourse-place { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
  .bourse-card { padding: 12px 10px; }
  .bourse-slots { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .bourse-slot { min-height: 150px; padding: 6px; font-size: 12px; }
  .bourse-pack { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: auto; }
  .bourse-pack .shop-cell { aspect-ratio: 1; }
  .bf-row { grid-template-columns: 78px 1fr; }
}

/* ---------- Phase C11: quest journal ---------- */
.q-points { font-weight: bold; color: #ffd54a; text-align: center; padding: 4px 0 8px; border-bottom: 1px solid #3a3020; margin-bottom: 6px; }
.quest { cursor: pointer; }
.q-qp { font-size: 11px; color: #ffd54a; border: 1px solid #6a5a2a; border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.q-diff { font-size: 11px; color: #9fb0cc; margin-left: 4px; }
.q-reqs { display: flex; flex-direction: column; gap: 2px; font-size: 12px; margin-top: 4px; }
.q-reqs .met { color: #7ad46a; }
.q-reqs .unmet { color: #ff8a7a; }
.q-unlock { font-size: 12px; color: #c8b890; margin-top: 4px; font-style: italic; }

/* ---------- World map: full screen; the key and your waypoints on the left, the map on the right ---------- */
#map-overlay { background: #0c0906; padding: 0; }
.map-shell {
  position: relative; display: flex; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden;
  background: #0c0906; color: var(--ink);
}
.map-side {
  flex: 0 0 272px; width: 272px; display: flex; flex-direction: column; min-height: 0; z-index: 3;
  background: linear-gradient(180deg, #2f271c 0%, #241e16 45%, #1a1510 100%);
  border-right: 2px solid var(--gold); box-shadow: 4px 0 22px rgba(0, 0, 0, 0.65), inset -1px 0 0 rgba(255, 213, 74, 0.15);
}
.map-side-head {
  padding: 14px 16px 10px; border-bottom: 1px solid rgba(212, 160, 23, 0.35);
  background: radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255, 128, 32, 0.22), transparent 70%);
}
.map-side-head h2 {
  margin: 0; font: bold 21px Georgia, "Times New Roman", serif; letter-spacing: 0.5px; color: var(--gold-hi);
  text-shadow: 0 0 12px rgba(255, 140, 40, 0.45), 2px 2px 2px #000;
}
.map-where { margin-top: 3px; font-size: 12px; color: var(--parch-dim); font-style: italic; min-height: 15px; }
.map-filter-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 8px 16px;
  border-bottom: 1px solid rgba(212, 160, 23, 0.25); background: rgba(0, 0, 0, 0.22);
}
.map-filter-state { font-size: 12px; color: var(--parch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-filter-state b { color: var(--gold-hi); }
.map-clear, .map-wp-box .wb, .map-side-toggle, .map-tools button {
  font: bold 12px Georgia, serif; color: var(--gold-hi); cursor: pointer; border: 1px solid var(--gold); border-radius: 5px;
  background: linear-gradient(180deg, #5a4a30, #3a2f20); box-shadow: inset 0 1px 0 rgba(255, 220, 140, 0.18), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.map-clear { flex: 0 0 auto; padding: 4px 9px; }
.map-clear:disabled { color: #8a7a5a; border-color: #5a4a2a; background: #2a2218; box-shadow: none; cursor: default; }
.map-clear:not(:disabled):hover, .map-wp-box .wb:hover, .map-side-toggle:hover, .map-tools button:hover { filter: brightness(1.2); }
.map-side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 12px; scrollbar-width: thin; scrollbar-color: #6a5430 transparent; }
.map-side-scroll::-webkit-scrollbar { width: 8px; }
.map-side-scroll::-webkit-scrollbar-thumb { background: #5a4628; border-radius: 4px; }

/* The key: one group a kind of place, opened and closed like an accordion. */
.map-group { margin: 6px 0; border: 1px solid rgba(212, 160, 23, 0.25); border-radius: 6px; background: rgba(0, 0, 0, 0.2); overflow: hidden; }
.map-group-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; cursor: pointer; text-align: left;
  font: bold 13px Georgia, serif; letter-spacing: 0.3px; color: var(--gold-hi); background: linear-gradient(180deg, #3d3223, #2b2319);
}
.map-group-head:hover { background: linear-gradient(180deg, #4a3d2a, #33291d); }
.map-group-head .chev { display: inline-block; width: 10px; color: var(--gold); transition: transform 0.18s ease; }
.map-group.open .map-group-head .chev { transform: rotate(90deg); }
.map-group-head .gn { margin-left: auto; font: normal 11px sans-serif; color: var(--parch-dim); }
.map-group.has-on .map-group-head { color: #fff0c8; text-shadow: 0 0 8px rgba(255, 160, 50, 0.6); }
.map-group-body { display: none; padding: 4px; }
.map-group.open .map-group-body { display: block; }
.map-type {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 4px 8px; margin: 1px 0; cursor: pointer; text-align: left;
  font: 13px Georgia, serif; color: var(--parch); background: transparent; border: 1px solid transparent; border-radius: 5px;
  transition: background 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.map-type img { width: 22px; height: 22px; flex: 0 0 22px; }
.map-type .n { margin-left: auto; min-width: 18px; text-align: center; font: 11px sans-serif; color: var(--parch-dim); background: rgba(0, 0, 0, 0.35); border-radius: 8px; padding: 1px 6px; }
.map-type:hover { background: rgba(212, 160, 23, 0.13); }
.map-type.all { font-style: italic; color: var(--parch-dim); }
.map-type.on {
  color: #fff3d0; border-color: var(--gold); background: linear-gradient(90deg, rgba(255, 140, 40, 0.32), rgba(212, 160, 23, 0.08));
  box-shadow: 0 0 12px rgba(255, 150, 40, 0.4), inset 0 0 10px rgba(255, 180, 60, 0.15);
}
.map-type.on img { filter: drop-shadow(0 0 5px rgba(255, 190, 80, 0.95)); }
.map-type.on .n { color: var(--gold-hi); }

/* Your waypoint */
.map-wps { margin-top: 12px; border-top: 1px solid rgba(212, 160, 23, 0.3); padding-top: 8px; }
.map-wps-head { padding: 0 4px 6px 6px; }
.map-wps-head h3 { margin: 0; font: bold 14px Georgia, serif; color: var(--gold-hi); letter-spacing: 0.3px; }
.map-wp-box {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px;
  border: 1px solid rgba(212, 160, 23, 0.35); background: rgba(0, 0, 0, 0.25);
}
.map-wp-box.none { display: block; padding: 6px 8px; font-size: 12px; line-height: 1.45; color: var(--parch-dim); font-style: italic; border-color: rgba(212, 160, 23, 0.2); }
.map-wp-box.hl { border-color: var(--gold-hi); box-shadow: 0 0 12px rgba(255, 170, 60, 0.5); }
.map-wp-box img { width: 22px; height: 22px; flex: 0 0 22px; }
.map-wp-box .wn { flex: 1; min-width: 0; }
.map-wp-box .wt { display: block; font: bold 13px Georgia, serif; color: var(--parch); }
.map-wp-box .wd { display: block; font-size: 11px; color: var(--parch-dim); }
.map-wp-box .wb { flex: 0 0 auto; padding: 4px 8px; }
.map-side-foot { padding: 8px 12px 10px; font-size: 11px; line-height: 1.45; color: var(--parch-dim); text-align: center; border-top: 1px solid rgba(212, 160, 23, 0.2); }

/* The map itself */
.map-main { position: relative; flex: 1; min-width: 0; min-height: 0; }
.map-main::after {   /* an ember vignette round the edge */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 70px rgba(10, 5, 0, 0.75), inset 0 0 18px rgba(255, 120, 30, 0.12);
}
#world-map { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; background: #1a1814; }
#world-map.dragging { cursor: grabbing; }
#map-close { top: 12px; right: 14px; width: 34px; height: 34px; font-size: 17px; z-index: 4; }
.map-tools { position: absolute; top: 60px; right: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 4; }
.map-tools button { width: 34px; height: 34px; padding: 0; font-size: 18px; }
#map-tip {
  position: absolute; z-index: 5; pointer-events: none; white-space: normal; max-width: 260px; font-size: 12px; padding: 5px 10px;
  color: var(--parch); background: rgba(20, 14, 8, 0.95); border: 1px solid var(--gold); border-radius: 5px; line-height: 1.35;
  box-shadow: 0 0 12px rgba(255, 140, 40, 0.25), 0 3px 10px rgba(0, 0, 0, 0.6);
}
#map-tip .mt-kind { color: var(--parch-dim); font-size: 11px; }
#map-tip .mt-detail { color: #e8dcc0; font-size: 11px; margin-top: 2px; }
.map-side-toggle { display: none; position: absolute; top: 12px; left: 12px; z-index: 4; padding: 7px 12px; font-size: 13px; }

/* Phones and narrow windows: the key slides in over the map. */
@media (max-width: 760px) {
  .map-side {
    position: absolute; left: 0; top: 0; bottom: 0; width: min(86vw, 300px); transform: translateX(-104%);
    transition: transform 0.22s ease; z-index: 6;
  }
  .map-shell.side-open .map-side { transform: none; }
  .map-side-toggle { display: block; }
  .map-shell.side-open .map-side-toggle { display: none; }
  .map-side-head h2 { font-size: 18px; }
  .map-tools button, #map-close { width: 40px; height: 40px; }
  .map-tools { top: 64px; }
}

/* Shop window: the shop's 40 slots (5 rows of 8) beside your 28-slot pack, no scrolling.
   On a narrow screen the pack goes underneath, 7 across. */
.shop-card { --cell: 48px; width: auto; max-width: 96vw; max-height: 96vh; padding: 14px 18px; position: relative; }
.shop-card h2 { margin-bottom: 2px; }
.shop-card h3 { margin: 4px 0 6px; font-size: 14px; }
.shop-sub { display: flex; justify-content: center; align-items: center; gap: 18px; font-size: 14px; }
.shop-sub .coins-row { margin: 0; }
#shop-refresh { color: var(--parch-dim); font-size: 12.5px; cursor: help; }
.shop-card .qty-row { margin: 6px 0 4px; }
.shop-card .qty { min-height: 36px; min-width: 46px; }
.shop-panes { display: flex; gap: 16px; align-items: flex-start; justify-content: center; }
.shop-grid, .pack-grid { display: grid; gap: 4px; }
.shop-grid { grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell); }
.pack-grid { grid-template-columns: repeat(4, var(--cell)); grid-auto-rows: var(--cell); }
.slot-grid .shop-cell { min-height: 0; padding: 0; cursor: pointer; user-select: none; }
.slot-grid .shop-cell.empty { cursor: default; opacity: 0.45; }
.slot-grid .shop-cell.out .inv-ico { opacity: 0.35; }
.slot-grid .shop-cell .inv-ico { width: 60%; height: 60%; margin-bottom: 8px; }
.shop-cell .c-price {
  position: absolute; left: 0; right: 0; bottom: 1px;
  font-size: 10px; line-height: 1; color: var(--gold-hi); text-shadow: 1px 1px 0 #000; text-align: center;
}
.shop-info {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 8px 0 6px; padding: 4px 8px;
  border: 1px solid var(--gold-dim); border-radius: 4px; background: rgba(0, 0, 0, 0.25);
}
#shop-info-text { flex: 1; font-size: 13.5px; color: var(--parch); text-align: left; }
#shop-act { min-width: 82px; min-height: 34px; }
.shop-card #shop-close { margin-top: 0; padding: 6px 0; font-size: 17px; }
@media (max-width: 699px) {
  .shop-card { --cell: min(46px, calc((100vw - 64px) / 8)); padding: 12px 10px; }
  .shop-panes { flex-direction: column; align-items: center; gap: 4px; }
  .pack-grid { grid-template-columns: repeat(7, var(--cell)); }
  .shop-cell .c-price { font-size: 9px; }
}

/* ---------- Dungeon entrance: intensities ---------- */
.dungeon-card { width: min(96vw, 640px); max-height: 94vh; overflow-y: auto; position: relative; }
.dg-title { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dg-ico { display: inline-flex; width: 30px; height: 30px; flex: none; }
.dg-ico svg { width: 100%; height: 100%; }
.dg-desc { font-size: 13.5px; color: var(--parch); text-align: center; margin: 0 0 10px; }
.dg-ints { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dg-int { padding: 8px 10px; border: 2px solid #5a5040; border-radius: 6px; background: linear-gradient(180deg, #3a3226, #2a241a); }
.dg-int.locked { opacity: 0.6; }
.dg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dg-badge { font-weight: bold; padding: 1px 8px; border-radius: 3px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; }
.dg-i1 .dg-badge { background: #24402a; color: #a8f0a0; }
.dg-i2 .dg-badge { background: #4a3a14; color: #ffd890; }
.dg-i3 .dg-badge { background: #4a1a14; color: #ffb0a0; }
.dg-lv { color: var(--gold-hi); font-size: 13px; font-weight: bold; }
.dg-text { font-size: 12.5px; color: var(--parch); margin: 4px 0; }
.dg-facts { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.dg-facts span { background: rgba(0, 0, 0, 0.3); border-radius: 3px; padding: 1px 6px; color: var(--parch); }
.dg-mons { font-size: 11.5px; color: var(--parch-dim); margin-top: 4px; }
.dg-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.dg-req.ok { color: #7ad46a; font-size: 12.5px; }
.dg-req.no { color: #ff9a7a; font-size: 12.5px; }
.dg-go { min-height: 34px; min-width: 90px; font-size: 14px; }
.dg-go:disabled { opacity: 0.5; cursor: not-allowed; }

/* The staff crown before an admin's name in chat, private messages and the friends list. */
img.crown { width: 17px; height: 14px; vertical-align: -2px; margin-right: 3px; image-rendering: auto; }

/* Quest page: the journal's detail view (built like the skill guide page). Tasks you have done are
   ticked and struck through, the current one is highlighted with its progress. */
.quest-card .gd-head { margin-bottom: 4px; }
.qd-state { font-size: 13px; font-weight: bold; white-space: nowrap; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--gold-dim); color: var(--parch); }
.qd-state.active { color: #ffd54a; border-color: #c8a85a; background: rgba(200, 168, 90, 0.12); }
.qd-state.done { color: #7ad46a; border-color: #4a8a3a; background: rgba(122, 212, 106, 0.12); }
.qd-body { padding-right: 4px; }
.qd-desc { color: var(--parch); font-style: italic; font-size: 13.5px; line-height: 1.4; margin: 4px 0 6px; }
.qd-sec { margin: 10px 0 4px; padding: 3px 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.3); color: var(--gold-hi);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; display: flex; justify-content: space-between; }
.qd-count { color: var(--parch-dim); }
.qd-start { display: flex; align-items: center; gap: 8px; padding: 4px; font-size: 14px; color: var(--ink); }
.qd-start-text { flex: 1; min-width: 0; }
.qd-start b { color: #9fd4ff; }
.qd-start .mini-btn { flex: none; min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.qd-req { font-size: 13.5px; padding: 2px 4px; }
.qd-req.met { color: #7ad46a; }
.qd-req.unmet { color: #ff8a6a; }
.qd-mark { display: inline-block; width: 20px; }
.qd-steps { list-style: none; margin: 0; padding: 0; }
.qd-step { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgba(138, 106, 30, 0.25); font-size: 14px; color: #b8b0a0; }
.qd-check { flex: none; width: 20px; height: 20px; border: 1px solid #5a5040; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; background: #161310; }
.qd-step-text { flex: 1; min-width: 0; }
.qd-step.done { color: #7f8a78; }
.qd-step.done .qd-step-text { text-decoration: line-through; text-decoration-color: rgba(122, 212, 106, 0.7); }
.qd-step.done .qd-check { color: #7ad46a; border-color: #4a8a3a; background: rgba(122, 212, 106, 0.15); }
.qd-step.current { color: var(--ink); background: rgba(255, 213, 74, 0.08); }
.qd-step.current .qd-check { color: #ffd54a; border-color: #c8a85a; }
.qd-prog { flex: none; color: var(--gold-hi); font-weight: bold; font-size: 13px; }
.qd-step.done .qd-prog { color: #7f8a78; font-weight: normal; }
.qd-rewards { display: flex; flex-direction: column; gap: 2px; }
.qd-rw { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); padding: 3px 4px; }
.qd-rw-ico { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.qd-rw-ico svg { width: 24px; height: 24px; }
.qd-unlock { color: #ffe9a0; }
.quest { cursor: pointer; }

/* Inventory drag and drop: the item follows the pointer; the slot it leaves is dimmed, the one under it lit. */
.inv-drag-ghost {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(40, 32, 20, 0.85); border: 2px solid var(--gold, #c9a227); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6); opacity: 0.92;
}
.inv-drag-ghost svg, .inv-drag-ghost img { width: 34px; height: 34px; }
.cr-inv-slot.drag-from { opacity: 0.35; }
.cr-inv-slot.drag-over { outline: 2px solid var(--gold-hi, #ffd54a); outline-offset: -2px; }
.cr-inv-slot { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

/* Music track list (Settings) */
.cr-music-track { padding: 2px 4px; font-size: 13px; }
.cr-music-track.unlocked { color: #7ee787; }
.cr-music-track.locked { color: #f47067; opacity: 0.75; }
.cr-music-diag {
  margin-top: 4px; padding: 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.35);
  font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace; color: #d8cfb8;
  white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text;
}

/* The Queen's Silent Court (2026-11-10): the crystal's vision. A veil darkens the edges of the view (the world shows
   through, the makers rising over the forge) and each line comes up in a band at the foot of the screen. Clicks
   pass through: the server holds you still while it lasts. */
#court-vision { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#court-vision.hidden { display: none; }
#court-vision .cv-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(10, 6, 18, 0) 38%, rgba(10, 6, 18, 0.78) 100%); }
#court-vision .cv-band { position: absolute; left: 50%; bottom: max(9vh, 84px); transform: translateX(-50%); width: min(720px, calc(100vw - 32px));
  padding: 14px 18px; border-radius: 10px; background: rgba(14, 10, 22, 0.78); border: 1px solid rgba(201, 162, 39, 0.55);
  box-shadow: 0 0 28px rgba(138, 74, 216, 0.35); }
#court-vision .cv-line { color: #f2e8d8; font: italic 17px/1.45 Georgia, 'Times New Roman', serif; text-align: center; opacity: 0; text-shadow: 0 1px 2px #000; }
#court-vision .cv-line.in { animation: cv-in 0.9s ease forwards; }
@keyframes cv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { #court-vision .cv-line { font-size: 15px; } #court-vision .cv-band { bottom: max(18vh, 120px); padding: 10px 12px; } }