/* Terra Oculta: Strata 2D — UI stylesheet (module §K).
   Colors come ONLY from src/core/palette.js (PALETTE/ROLES hexes).
   Dark diegetic style, monospace system stack, 2px bone borders. */

#ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none; /* interactive panels re-enable it */
  font-family: ui-monospace, 'Cascadia Mono', Consolas, Menlo, 'Courier New', monospace;
  font-size: 14px;
  color: #d0c0a0; /* parchment */
  text-shadow: 1px 1px 0 #0e1418; /* abyss */
}
#ui * { box-sizing: border-box; margin: 0; padding: 0; }

.pixelated { image-rendering: pixelated; }

.hud-panel {
  background: #0e1418dd; /* semi-transparent abyss */
  border: 2px solid #e8dcc0; /* bone_white */
}

/* ---------- HUD ---------- */

.hud { position: absolute; inset: 0; }

.hud-topleft { position: absolute; top: 8px; left: 8px; }
.hp-bar {
  position: relative;
  width: 180px;
  height: 16px;
  background: #1a2028; /* night_sky */
  border: 2px solid #e8dcc0;
}
.hp-fill { height: 100%; width: 100%; background: #b85028; /* ember */ }
.hp-bar.low .hp-fill { background: #e61818; /* pure_blood_red */ }
.hp-text {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 11px;
  line-height: 12px;
  color: #e8dcc0;
}
.scrap-row {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  padding: 4px 8px;
}
.scrap { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #e8dcc0; }
.scrap img { width: 16px; height: 16px; }

.hud-topright { position: absolute; top: 8px; right: 8px; text-align: right; }
.stratum-label { padding: 4px 10px; color: #f8d878; /* healing_gold */ letter-spacing: 1px; }

.hud-bottomleft { position: absolute; left: 8px; bottom: 8px; padding: 6px 10px; }
.toolname { font-size: 12px; color: #b8a080; /* aged_paper */ }
.weaponname { font-size: 12px; color: #e8dcc0; margin-top: 2px; }
.ammo { font-size: 16px; color: #f8d878; margin-top: 2px; }

.hotbar {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.slot {
  position: relative;
  width: 40px;
  height: 40px;
  background: #0e1418dd;
  border: 2px solid #7a6844; /* worn_brass */
  display: flex;
  align-items: center;
  justify-content: center;
}
.slot.selected { border-color: #f8d878; }
.slot.empty img { display: none; }
.slot img { width: 24px; height: 24px; }
.slot .key { position: absolute; left: 2px; top: 0; font-size: 10px; color: #b8a080; }
.slot .count { position: absolute; right: 2px; bottom: 0; font-size: 11px; color: #e8dcc0; }

.prompt {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  padding: 4px 12px;
  color: #e8dcc0;
  white-space: nowrap;
}

.toasts {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.toast {
  background: #0e1418dd;
  border: 2px solid #b8a080;
  padding: 4px 12px;
  color: #e8dcc0;
  opacity: 1;
  transition: opacity 0.4s;
}
.toast.fade { opacity: 0; }

/* ---------- Screens ---------- */

.screens { position: absolute; inset: 0; }
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e1418aa;
  pointer-events: auto;
}
.panel {
  background: #0e1418dd;
  border: 2px solid #e8dcc0;
  padding: 20px 24px;
  width: min(640px, 92vw);
  max-height: 84vh;
  overflow: auto;
}
.panel h1 { font-size: 22px; letter-spacing: 2px; color: #f8d878; margin-bottom: 8px; }
.panel h1.death-title { color: #e61818; }
.panel h2 { font-size: 14px; letter-spacing: 1px; color: #e8dcc0; margin: 14px 0 6px; }
.panel .sub { font-size: 12px; color: #b8a080; margin-bottom: 10px; }
.panel .line { font-size: 13px; margin: 4px 0; }
.panel-body { margin-top: 4px; }

.btn-row { margin-top: 14px; }
.btn {
  display: inline-block;
  font: inherit;
  background: #1a2028;
  color: #e8dcc0;
  border: 2px solid #e8dcc0;
  padding: 6px 14px;
  margin: 4px 6px 0 0;
  cursor: pointer;
  text-shadow: none;
}
.btn:hover:not(:disabled) { background: #2a333e; /* cold_stone */ }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary { border-color: #f8d878; color: #f8d878; }

.controls-list { columns: 2; column-gap: 24px; font-size: 12px; color: #b8a080; }
.controls-list .ctl { break-inside: avoid; margin-bottom: 2px; }
.controls-list .ctl b { color: #e8dcc0; font-weight: normal; }

.inv-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.inv-cell {
  border: 2px solid #7a6844;
  padding: 4px 2px;
  text-align: center;
  font-size: 10px;
  color: #b8a080;
  min-height: 58px;
}
.inv-cell img { display: block; width: 24px; height: 24px; margin: 0 auto 2px; }
.inv-cell .inv-count { color: #e8dcc0; font-size: 11px; }
.inv-empty { font-size: 12px; color: #7a6844; }

.shop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #2a333e;
}
.shop-row .name { flex: 1; font-size: 13px; color: #e8dcc0; }
.shop-row .cost { font-size: 11px; color: #b8a080; white-space: nowrap; }
.shop-row .btn { margin: 0; padding: 3px 10px; font-size: 12px; }

.msg { min-height: 18px; margin-top: 8px; font-size: 12px; }
.msg.ok { color: #8ca078; /* sage */ }
.msg.err { color: #e61818; }

.journal-group { font-size: 13px; letter-spacing: 1px; color: #f8d878; margin: 12px 0 4px; }
.journal-entry { margin-bottom: 10px; }
.journal-entry h3 { font-size: 13px; color: #e8dcc0; margin-bottom: 2px; }
.journal-entry.locked h3 { color: #7a6844; }
.journal-entry p { font-size: 12px; color: #b8a080; line-height: 1.4; }