body {
  margin: 0;
  font-family: sans-serif;
  background-color: #0f1a2f;
  color: #86dabd;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

h1 {
  color: #f15f24;
}

#element-grid {
  border-collapse: collapse;
}

#element-grid th,
#element-grid td {
  width: 60px;
  height: 60px;
  border: 1px solid #86dabd;
  position: relative;
  text-align: center;
  vertical-align: middle;
}

#element-grid img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  position: absolute;              /* ✅ Makes centering possible */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* ✅ Perfect centering */
}

.drop-zone,
.drop-cell {
  background-color: #162237;
}

.interaction-area {
  display: flex;
  justify-content: center;     /* ✅ centers the two grids as a group */
  align-items: flex-start;
  gap: 3rem;
  margin-top: 2rem;
}

#element-grid th:first-child {
  font-size: 0.8rem; /* or whatever size works */
}

.drag-panel {
  border: 1px solid #86dabd;
  padding: 1rem;
}

.drag-bank {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  justify-items: center;
  margin-bottom: 2rem;
  min-width: 280px; /* prevents collapse */
  min-height: 100px;
}

.draggable {
  width: 60px;
  height: 60px;
  cursor: grab;
}

#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 26, 47, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  color: white;
}

.splash-content {
  background: #1f2d45;
  padding: 2rem;
  border: 2px solid #86dabd;
  border-radius: 10px;
  text-align: center;
}