.grid-machine {
	display: grid;
	grid-template-columns: repeat(4, 120px);
	width: min-content;
	column-gap: 4px;
	row-gap: 4px;
	padding: 4px;
	background: linear-gradient(-45deg,#333,#555);
}

.machine {
	background: radial-gradient(#000,#222);
	display:flex;
	flex-direction: column;
	align-items:stretch;
	justify-content: center;
	aspect-ratio: 1 / 1;
	position: relative;
	user-select: none;
	transition: border-width 0.25s;
	max-height: 160px;
}
.machine:hover {
	background: radial-gradient(#300,#533);
}

.machine:has(.machine-inner) {
}

.machine-title, .machine-inner {
	border: solid #442 5px;
  border-top: none;
  border-left-color: #775;
  border-top-color: #775;
	background-color: #664;
}

.machine-title {
  text-align: center;
  border-bottom-width: 2px;
}

.machine-title:hover {
  color: black;
  background-color: #ddd;
  border-color: white;
}

.machine-inner {
  box-sizing: border-box;
  width: 120px;
  max-height: 120px;
	aspect-ratio: 1 / 1;
	color: white;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.machine-inner > :last-child {
  flex-grow: 1;
}

.desc {
	font-size: 0.75em;
}

.inventory-machine {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
}

.mouse {
	background: white;
	padding: 10px;
	box-shadow: 10px 10px 5px #0004;
	position:absolute;
	pointer-events:none;
}

.core {
	border: inset #0004;
	flex-grow: 1;
	text-align: center;
	border-color: hsl(40deg, 50%, calc(var(--p) * 100%));
}
.core:hover {
	border-color: green;
	pointer-events: all;
}


.processor {
  display: flex;
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
}
.processor-stats {  
}

.processor-stats div {
  
}

.processor-entries {
  overflow-x: scroll;
  overflow-y: hidden;
  --row-height: 25%;
  width: 4.5em;
  background-color: #220;
  scrollbar-color: #664 #220;
  
}

.processor-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1.5em;
  grid-template-rows: repeat(4, 25%);
  height: 100%;
  box-sizing: border-box;
  min-width: 4.5em;
  width: max-content;
  background: 
    repeating-linear-gradient(to right, #334, #0003 2px, #0003 calc(1.5em - 2px), #334 1.5em),
    repeating-linear-gradient(#223, #000 calc(25% - 4px), #334 25%)
  ;
}

.processor-entries .core {
  font-size: 0.5em;
  border: #777 double 3px;
  border-right: solid 3px color-mix(in oklab, #f0f calc(var(--p) * 100%), #0f0);
  position: relative;
}
.processor-entries .core:hover {
  border-right: solid 3px #ff0;
}
.processor-entries .core::after {
  content: '';
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  background: radial-gradient(#9990 80%, #777 80%);
}


.processor-entries:not(:has(:nth-child(5))) {
  overflow-x: unset;
}

.processor-grid:not(:has(:nth-child(5))) {
  background: 
    repeating-linear-gradient(to right, #334, #0003 2px, #0003 calc(50% - 2px), #334 50%),
    repeating-linear-gradient(#223, #000 calc(50% - 4px), #334 50%)
  ;
  grid-auto-columns: unset;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}

.processor-grid:not(:has(:nth-child(5))) .core {
  border-width: 9px;
}

.interval-timer {
  margin-top: auto;
	position: relative;
	background: linear-gradient(to right,#494,#5f5);
	text-align: center;
	color: #000;
}
.interval-indicator {
  overflow: hidden;
	position: absolute;
	top: 0%;
	left: 0%;
	bottom: 0%;
	background: linear-gradient(to right,#944,#f55);
	text-align: center;
	color: #fff;
	transition: right 0.25s;
}

.crit-meter {
  height: 1em;
  position: relative;
  background: linear-gradient(to left,green,lime var(--crit),yellow var(--crit), red);
  overflow: hidden;
}
.crit-indicator {
  position: absolute;
  transition: right 0.4s cubic-bezier(0,1.2,1,1.2);
  top: 0px;
  bottom: 0px;
  translate: 50% 0%;
  width: 21px;
  background: linear-gradient(to right,#0000,#9993 40%,#999,#9993 60%,#0000)
}
.crit-indicator.success {
  background: linear-gradient(to right,#0000,#fff3 40%,#fff,#fff3 60%,#0000)
}


/* trading */

.machine-trading {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 50px auto;
}

.tradable-machine {
  display: grid;
  grid-row: 1 / -1;
  grid-template-columns: 1fr;
  grid-template-rows: subgrid;
}

.trade-purchaser {
	display: flex;
  flex-direction: column;
}

.trade-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.trade-costs {
	color: white;
  height: 40px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
  justify-content: stretch;
}

.cost {
  flex-grow: 1;
}
.unbuyable {
	color: red;
}