/* ── Custom Properties ─────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --bg-0: #090c10;
  --bg-1: #0d1117;
  --bg-2: #161b22;
  --bg-3: #21262d;

  /* Borders */
  --border: #21262d;
  --border-bright: #30363d;

  /* Text */
  --text:      #c9d1d9;
  --text-dim:  #6e7681;
  --text-mute: #3d444d;

  /* Game color tokens */
  --c-room:    #79c0ff;
  --c-npc:     #ff7b72;
  --c-player:  #e3b341;
  --c-hit:     #ffa657;
  --c-crit:    #ff7b72;
  --c-miss:    #484f58;
  --c-proc:    #d2a8ff;
  --c-system:  #7dd3fc;
  --c-say:     #e3b341;
  --c-emote:   #b08800;
  --c-lore:    #7ee787;
  --c-death:   #9e6a03;
  --c-error:   #ff7b72;
  --c-exit:    #56d364;
  --c-xp:      #388bfd;
  --c-debt:    #f0883e;
  --c-creation:#a5d6ff;

  /* HP bar gradient stops */
  --hp-hi: #56d364;
  --hp-md: #e3b341;
  --hp-lo: #f85149;

  /* Layout */
  --header-h:  42px;
  --input-h:   48px;
  --vitals-h:  32px;
  --sidebar-w: 210px;

  /* Typography */
  --font: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', 'Menlo', monospace;
  --font-size: 13.5px;
  --line-h: 1.65;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
}

body {
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-h);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── App shell ─────────────────────────────────────────────────────────── */

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

/* Subtle scanline overlay — barely visible, 2% opacity */
#app::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.018) 3px,
    rgba(0,0,0,0.018) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Header ────────────────────────────────────────────────────────────── */

#header {
  flex-shrink: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 1.25rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

#logo {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--c-room);
  text-shadow: 0 0 24px rgba(121,192,255,0.35);
  white-space: nowrap;
}

#char-hud {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

#char-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}

#char-name {
  font-weight: 600;
  color: var(--c-player);
  font-size: 0.95rem;
}

#char-badge {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.bar-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bar-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  width: 1.6rem;
}

.bar-track {
  width: 100px;
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border-bright);
}

.bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s ease, background-color 0.35s ease;
  background: var(--hp-hi);
}

.bar-fill.hp-mid  { background: var(--hp-md); }
.bar-fill.hp-low  { background: var(--hp-lo); }
.st-fill          { background: #388bfd; }

.bar-val {
  font-size: 0.78rem;
  color: var(--text-dim);
  min-width: 5rem;
}

.rt-fill {
  background: #e8a020;
  transition: none;
  width: 100%;
}

.rt-fill.rt-draining {
  animation: rt-drain linear forwards;
}

@keyframes rt-drain {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ── Main ──────────────────────────────────────────────────────────────── */

#main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Output ────────────────────────────────────────────────────────────── */

#output-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem 0.5rem;
  scroll-behavior: smooth;
  background: var(--bg-1);
}

/* Scrollbar */
#output-wrap::-webkit-scrollbar       { width: 6px; }
#output-wrap::-webkit-scrollbar-track { background: var(--bg-1); }
#output-wrap::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }

#output {
  max-width: 780px;
  padding-bottom: 1rem;
}

/* ── Message blocks ────────────────────────────────────────────────────── */

.msg {
  animation: fadeSlide 0.12s ease-out;
  margin-bottom: 0.1rem;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Banner */
.msg-banner-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--c-room);
  text-shadow: 0 0 32px rgba(121,192,255,0.5);
  margin: 1.5rem 0 0.5rem;
}

.msg-banner-sub {
  color: var(--text);
  white-space: pre-line;
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* Room */
.msg-room { margin: 1rem 0 0.4rem; }

.room-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-room);
  text-shadow: 0 0 18px rgba(121,192,255,0.3);
  letter-spacing: 0.04em;
  border-left: 3px solid var(--c-room);
  padding-left: 0.65rem;
  margin-bottom: 0.35rem;
}

.room-desc {
  color: var(--text);
  padding-left: 1rem;
  margin-bottom: 0.35rem;
}

.room-also-here, .room-paths {
  padding-left: 1rem;
  margin-top: 0.2rem;
}

.room-section-label {
  color: var(--c-room);
  font-weight: 600;
  opacity: 0.75;
}

.room-entity { color: var(--c-npc); }
.room-entity.hostile { color: var(--c-crit); }
.room-entity.hostile::before { content: '⚔ '; opacity: 0.6; }

/* Combat — multi-line block */
.msg-combat-block { margin: 0.5rem 0; }

.combat-action    { color: var(--text); }
.combat-roll      { color: var(--text-dim); font-size: 0.88em; padding-left: 0.5rem; }
.combat-result    { color: var(--c-hit);  padding-left: 0.5rem; }
.combat-location  { color: var(--c-crit); padding-left: 0.5rem; font-style: italic; }
.combat-wound     { color: var(--text-dim); padding-left: 0.5rem; }
.combat-reaction  { color: var(--c-npc);  padding-left: 0.5rem; }
.combat-miss-line { color: var(--c-miss); padding-left: 0.5rem; }
.combat-crit      { color: var(--c-crit); font-weight: 600; padding-left: 0.5rem; }
.combat-death     { color: var(--c-death); font-weight: 600; padding-left: 0.5rem; font-style: italic; }

/* Crit block highlights — left border signals severity */
.msg-combat-crit     { border-left: 2px solid var(--c-player); padding-left: 0.4rem; }
.msg-combat-npc_crit { border-left: 2px solid var(--c-crit);   padding-left: 0.4rem; }

/* Proc */
.msg-proc {
  padding-left: 0.5rem;
  border-left: 2px solid var(--c-proc);
  margin: 0.2rem 0;
  color: var(--c-proc);
}

.proc-label {
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-right: 0.5rem;
}

.proc-label::before { content: '✦ '; }

/* XP / Level up */
.msg-xp     { color: var(--c-lore);   padding-left: 0.5rem; font-size: 0.9rem; }
.msg-levelup{ color: var(--c-player); padding-left: 0.5rem; font-weight: 600; }

/* Social */
.msg-say         { color: var(--c-say); }
.msg-say-self    { color: var(--c-say); }
.speaker-name    { font-weight: 600; }
.msg-emote       { color: var(--c-emote); font-style: italic; }

/* System / Info */
.msg-system   { color: var(--c-system); white-space: pre-line; }
.msg-error    { color: var(--c-error);  }
.msg-lore     { color: var(--c-lore);   white-space: pre-line; }
.msg-death    { color: var(--c-death);  white-space: pre-line; font-style: italic; border-left: 2px solid var(--c-death); padding-left: 0.75rem; margin: 0.5rem 0; }
.msg-creation { color: var(--c-creation); white-space: pre-wrap; }
.msg-npc-action    { color: var(--text-dim); }
.msg-player-action { color: var(--text-dim); font-style: italic; }
.msg-welcome  { color: var(--c-lore); font-style: italic; }

/* Who list */
.msg-who { margin: 0.5rem 0; }
.who-header { color: var(--c-system); font-weight: 600; margin-bottom: 0.3rem; }
.who-row { color: var(--text); display: flex; gap: 0.75rem; }
.who-name { color: var(--c-player); min-width: 14ch; }
.who-info { color: var(--text-dim); font-size: 0.88rem; }

/* Stats panel */
.msg-stats { margin: 0.5rem 0; white-space: pre; color: var(--text); }
.stats-heading { color: var(--c-room); font-weight: 600; margin-bottom: 0.3rem; }
.stat-row { display: flex; gap: 2rem; color: var(--text); margin: 0.1rem 0; }
.stat-key { color: var(--text-dim); min-width: 5ch; }

/* Skills panel */
.msg-skills { margin: 0.5rem 0; }
.skills-heading { color: var(--c-room); font-weight: 600; margin-bottom: 0.3rem; }
.skill-row { display: flex; gap: 1rem; color: var(--text); padding: 0.05rem 0; }
.skill-name { min-width: 24ch; }
.skill-rank { color: var(--c-player); min-width: 4ch; text-align: right; }
.skill-cost { color: var(--text-dim); font-size: 0.85rem; }
.msg-train  { color: var(--c-lore); }

/* Separator */
.msg-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.6rem 0;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */

#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#sidebar::-webkit-scrollbar       { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

.sb-section {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.sb-section:last-child { border-bottom: none; }

.sb-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.sb-value {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Room name in sidebar */
#sb-room-name {
  color: var(--c-room);
  font-weight: 600;
  font-size: 0.85rem;
}

/* Exit chips */
#sb-exit-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.exit-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.5rem;
  background: var(--bg-3);
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  color: var(--c-exit);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
  width: fit-content;
}

.exit-chip:hover {
  background: rgba(86,211,100,0.12);
  border-color: var(--c-exit);
}

.exit-arrow { opacity: 0.7; }

/* XP bar in sidebar */
.xp-track {
  width: 100%;
  margin-bottom: 0.3rem;
}

.xp-bar-fill {
  background: var(--c-xp);
  box-shadow: 0 0 8px rgba(56,139,253,0.4);
}

#xp-val { font-size: 0.8rem; color: var(--text-dim); }

#debt-display {
  margin-top: 0.25rem;
  font-size: 0.78rem;
}

.debt-label { color: var(--text-dim); }
#debt-val   { color: var(--c-debt); margin-left: 0.3rem; }

/* Online list */
#sb-online-list { font-size: 0.85rem; }

.online-name {
  color: var(--c-player);
  display: block;
  padding: 0.05rem 0;
}

.online-name::before { content: '· '; color: var(--text-mute); }

/* ── Body diagram (sidebar) ────────────────────────────────────────────── */

.sb-stance-line {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stance-kneeling { color: var(--c-hit); }
.stance-sitting  { color: var(--c-hit); }
.stance-prone    { color: var(--c-crit); }

.body-diagram {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 0.2rem;
}
.bd-center { text-align: center; padding: 0.1rem 0; }
.bd-left   { text-align: right;  padding: 0.1rem 0.25rem 0.1rem 0; width: 50%; }
.bd-right  { text-align: left;   padding: 0.1rem 0 0.1rem 0.25rem; width: 50%; }

.bd-zone {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px solid var(--border);
  min-width: 3.6rem;
  text-align: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

/* wound rank drives the colour via data-wound attribute */
.bd-zone[data-wound="1"] { color: #e3b341; border-color: #e3b341; background: rgba(227,179,65,0.08); }
.bd-zone[data-wound="2"] { color: #f0883e; border-color: #f0883e; background: rgba(240,136,62,0.10); }
.bd-zone[data-wound="3"] { color: #ff7b72; border-color: #ff7b72; background: rgba(255,123,114,0.12); }

/* ── Wound table in STATS output ─────────────────────────────────────── */

.stats-wounds { margin-top: 0.6rem; }

.wound-row {
  display: flex;
  gap: 0.4rem;
  margin: 0.15rem 0;
}

.wound-cell {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}

.wound-loc {
  color: var(--text-dim);
  min-width: 3.8rem;
  font-size: 0.78rem;
}

.wound-pips { letter-spacing: 0.05em; color: var(--text-mute); }

.wound-rank-0 .wound-pips { color: var(--text-mute); }
.wound-rank-1 .wound-pips { color: #e3b341; }
.wound-rank-2 .wound-pips { color: #f0883e; }
.wound-rank-3 .wound-pips { color: #ff7b72; }

.wound-label { font-size: 0.75rem; }
.wound-rank-1 .wound-label { color: #e3b341; }
.wound-rank-2 .wound-label { color: #f0883e; }
.wound-rank-3 .wound-label { color: #ff7b72; }

/* ── Vitals strip ─────────────────────────────────────────────────────── */

#vitals-strip {
  flex-shrink: 0;
  height: var(--vitals-h);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}

#vitals-strip #vitals-bars {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1;
}

/* ── Input ─────────────────────────────────────────────────────────────── */

#input-area {
  flex-shrink: 0;
  height: var(--input-h);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.25rem;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}

#prompt-glyph {
  color: var(--c-exit);
  font-size: 1rem;
  opacity: 0.8;
  user-select: none;
}

#cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: var(--font-size);
  color: var(--text);
  caret-color: var(--c-exit);
}

#cmd-input::placeholder { color: var(--text-mute); }

/* ── Room floor items ──────────────────────────────────────────────────── */

.room-floor { padding-left: 1rem; margin-top: 0.2rem; }
.room-floor-item { color: #a8b3c4; }

/* ── Inventory panel ───────────────────────────────────────────────────── */

.msg-inventory { margin: 0.5rem 0; }

.inv-section-head {
  color: var(--c-room);
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.15rem;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}

.inv-row {
  display: flex;
  gap: 0.5rem;
  margin: 0.05rem 0;
}

.inv-slot {
  color: var(--text-dim);
  min-width: 14ch;
  font-size: 0.85rem;
}

.inv-item      { color: var(--text); }
.inv-pack-item { color: var(--text); font-size: 0.88rem; }
.inv-empty     { color: var(--text-mute); font-size: 0.85rem; }
.inv-coins     { color: var(--c-player); margin-top: 0.3rem; }

/* ── Utility ───────────────────────────────────────────────────────────── */

.hidden { display: none !important; }