:root{
        --primary-color: #0077cc;
        --secondary-color: #00cc36;
        --accent-color: #cc1d97;
        --background-color: #f0f0f5;
        --text-color: #333;
    }
    body {
      font-family: sans-serif;
      background: #f0f0f5;
      /* padding: 20px; */
      text-align: center;
    }

    h1 {
      color: var(--text-color);
    }

    .stage {
        display: inline-flex;
        flex-direction: column;
        max-width:12vw;
        min-height:50vh;
      border: 2px dashed #ccc;
      padding: 16px;
      margin-bottom: 20px;
      border-radius: 8px;
      background: white;
         background-color: var(--text-color);


    }

    .stage h2 {
      margin-bottom: 10px;
      color: var(--background-color);
      min-height: 5vw;
    }

    .drop-area {
      flex-grow: 1;
      padding: 10px;
      border-radius: 10px;
      background-color: #f9f9f9;

    
    }


    .drop-area.over {
      background-color: #e0f7ff;
    }

    .card {
      display: inline-block;
      margin: 10px;
      padding: 12px 16px;
      background: var(--secondary-color);
      color: white;
      border-radius: 6px;
      cursor: grab;
    }
    .modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 12px;
  width: 80%;
  max-width: 600px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  font-family: monospace;
  white-space: pre-wrap;
}

.code-block {
  background: #f4f4f4;
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
}

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}


    .popup {
      display: none;
      padding: 15px;
      background: #d4edda;
      border: 1px solid #c3e6cb;
      color: #155724;
      margin-top: 20px;
      border-radius: 6px;
    }