:root {
  --bg: #000;
  --panel: #0c0c0c;
  --line: #2a2a2a;
  --text: #c8c8c8;
  --dim: #6c6c6c;
  --gold: #ffd84a;
  --red: #e04040;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.35 ui-monospace, Menlo, Consolas, monospace;
  overflow: hidden;
}

#app { display: flex; height: 100vh; height: 100dvh; }

#mapwrap { flex: 1; position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#side {
  width: 340px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: var(--panel);
  min-height: 0;
}

#status { padding: 8px 10px; border-bottom: 1px solid var(--line); }
#status .stats { display: flex; gap: 14px; flex-wrap: wrap; }
#status b { color: #fff; }
#status small { color: var(--dim); margin-left: 4px; }
#foes { color: #c06060; }
#next { color: var(--dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#next b { color: var(--gold); font-weight: normal; }

#lists { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.list { flex: 1; display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--line); }
#purchaseBox { flex: 1.2; }
.list h2 {
  margin: 0;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  font-weight: normal;
}
.list h2 small { text-transform: none; letter-spacing: 0; color: #555; margin-left: 6px; }
.list ol, .list ul { list-style: none; margin: 0; padding: 0 6px 8px; overflow-y: auto; flex: 1; }
.list.over { background: #141414; }

.row {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
  padding: 4px 6px 4px 0;
  margin: 3px 0;
  background: #121212;
  border-left: 4px solid var(--owner, #555);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}
.row:hover { background: #181818; }
.row .grip { grid-row: 1 / 3; color: #444; text-align: center; touch-action: none; cursor: grab; padding: 6px 0; }
.row .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .label em { color: var(--dim); font-style: normal; }
.row .cost { color: var(--gold); text-align: right; }
.row .meta { grid-column: 2 / 4; color: var(--dim); font-size: 11px; display: flex; justify-content: space-between; }
.row .fill { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--gold); width: 0; }
.row.head { background: #1a1708; }
.row.bonus { box-shadow: inset 0 0 0 1px #8a7322; }
.row.bonus .label em { color: var(--gold); }
.row.bought { animation: bought 0.6s ease-out; }
@keyframes bought { from { background: #5a4a10; } to { background: #121212; } }
.row.dragging { opacity: 0.25; }
.row.ghost {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  width: 300px;
  opacity: 0.9;
  box-shadow: 0 4px 16px #000;
}
.placeholder { height: 30px; margin: 3px 0; border: 1px dashed #555; }

#log {
  height: 96px;
  overflow: hidden;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
}
#log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#log .death { color: #c06060; }
#log .rise { color: #c9b45a; }
#log .depth { color: #ddd; }

#restart {
  position: fixed;
  top: 6px;
  right: 8px;
  z-index: 5;
  background: #111;
  border: 1px solid #3a3a3a;
  color: #888;
  font: inherit;
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}
#restart:hover { color: var(--red); border-color: var(--red); }
#status { padding-right: 96px; }

@media (max-width: 760px) {
  #app { flex-direction: column; }
  #mapwrap { flex: 0 0 46%; }
  #side { width: auto; flex: 1; border-left: none; border-top: 1px solid var(--line); }
  #lists { flex-direction: row; }
  .list { border-bottom: none; }
  #purchaseBox { border-right: 1px solid var(--line); flex: 1; }
  .list h2 small { display: none; }
  .row { grid-template-columns: 22px 1fr; }
  .row .cost { grid-column: 2; text-align: left; }
  .row .grip { font-size: 15px; grid-row: 1 / 4; }
  .row .meta { grid-column: 2; }
  .row.ghost { width: 46vw; }
  #log { height: 52px; }
  #status { padding-right: 10px; }
}