* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
	font-family: Ubuntu, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

body {
	display: grid;
	grid-template-columns: 280px 1fr;
	grid-template-rows: auto auto 1fr;
	background: #101214;
	color: #e6e6e6;
}

#goalBar {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: #0b0d10;
	border-bottom: 1px solid #222;
	position: sticky;
	top: 0;
	z-index: 2;
}

button {
	background: #1f2937;
	color: #e6e6e6;
	border: 1px solid #2b3545;
	border-radius: 6px;
	padding: 6px 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	cursor: pointer;
	font-family: "Ubuntu"
}


#goalDetails {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,0.75); /* dim backdrop */
  align-items: center;
  justify-content: center;
  z-index: 999; /* above everything */
}

/* Only when visible */
#goalDetails:not([hidden]) {
  display: flex;
}

#statsDetails {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,0.75); /* dim backdrop */
  align-items: center;
  justify-content: center;
  z-index: 998; /* above everything */
}

/* Only when visible */
#statsDetails:not([hidden]) {
  display: flex;
}

.content {
  background:#0f1217;
  border:1px solid #222;
  border-radius:10px;
  padding:20px;
  max-width:80%;
  width:90%;
  max-height:80%;
  overflow:auto;
  color:#e6e6e6;
}

.hidden {
	display: none;
}

#sidebar {
	grid-row: 2 / 4;
	background: #0f1217;
	border-right: 1px solid #222;
	padding: 12px;
	overflow: auto;
	position: relative;
}

#sidebar h2 {
	margin: 4px 0 8px;
	font-size: 16px;
	font-weight: 600;
}

#heatBox {
	margin: 8px 0 12px;
	background: #152033;
	padding: 8px;
	border: 1px solid #22314a;
	border-radius: 8px;
}

#inventoryList {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.inv-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
	background: #131923;
	border: 1px solid #1f2937;
	border-radius: 8px;
	cursor: pointer;
}

.inv-item:hover {
	background: #162033;
}

.inv-title {
	font-weight: 600;
}

.inv-count {
	opacity: 0.75;
	font-size: 12px;
}

.inv-item.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.inv-item.selected {
	background: #4681bc;
}

#tooltip {
	position: fixed;
	left: 300px;
	top: 20px;
	background: #0b0f17;
	border: 1px solid #20304a;
	padding: 8px 10px;
	border-radius: 8px;
	max-width: 260px;
	pointer-events: none;
	white-space: pre-line;
	z-index: 999;
}

#goalContent{
	white-space: pre-line;
}

main {
	position: relative;
	overflow: hidden;
    grid-row: 2 / 4;
}

#game {
	width: 100%;
	height: 100%;
	display: block;
	background: #0b0d10;
}

#hud {
	position: absolute;
	left: 8px;
	bottom: 8px;
	font-size: 12px;
	opacity: 0.75;
	background: rgba(0, 0, 0, 0.4);
	padding: 6px 8px;
	border-radius: 6px;
}


table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  background: #131923;
  border: 1px solid #1f2937;
  border-radius: 8px;
  overflow: hidden; /* keeps corners rounded */
}

table th,
table td {
  padding: 10px 14px;
  text-align: left;
}

table th {
  background: #1c2535;
  font-weight: 600;
  color: #f0f0f0;
  border-bottom: 1px solid #2b3545;
}

table tr:nth-child(even) {
  background: #162033;
}

table tr:nth-child(odd) {
  background: #131923;
}

table td {
  border-bottom: 1px solid #1f2937;
}

table tr:last-child td {
  border-bottom: none;
}

#energyPyramid, #biomassPyramid {
  
  
  gap: 10px;
  margin-top: 16px;
}

#energyPyramid:not([hidden]), #biomassPyramid:not([hidden]) {
  display: flex;
  flex-direction: column-reverse; /* PP at bottom */
}


.pyramid-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pyramid-row .label {
  width: 160px;
  font-size: 14px;
  flex-shrink: 0;
}

.pyramid-row .bar {
  flex: 1;
  height: 30px;
  background: #1a202c;
  border: 1px solid #2b3545;
  border-radius: 6px;
  overflow: hidden;
}

.pyramid-row .bar div {
  height: 100%;
  background: linear-gradient(90deg, #4681bc, #6fa8dc);
  width: 0%;
  transition: width 0.4s ease;
}

.pyramid-row span:last-child {
  width: 160px;
  font-size: 14px;
  text-align: right;
  font-weight: 600;
}



#saveSection button {
  width: 100%;
  margin: 6px 0;
}

#resetSaveBtn {
  background: #7a1f1f;
  border-color: #a33333;
  color: #f2dada;
}

#resetSaveBtn:hover {
  background: #922727;
}
 
#lastSaved {
  font-size: 0.8em;
  color: #888;
  margin-top: 4px;
  text-align: center;
}